现在的位置: 首页 > 综合 > 正文

非ajax上传

2018年01月25日 ⁄ 综合 ⁄ 共 1124字 ⁄ 字号 评论关闭

看了下非ajax上传的方式,终于明白了没有ajax该怎么做。

实现原理: 表单提交到一个servlet,然后在iframe(是隐藏的)中打开这个servlet,如果成功了servlet中会输出js脚本,iframe中通过servlet输出的js脚本操作表单提交页面中的元素(如div或者span,输出上传成功的信息),

上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它。很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页,你就可以随心所欲的上传他电脑上的文件了

注意:在提交后要清空input (type="file")的值,方法如下:


1.form.reset();

创建一个新的form,把上传控件临时放过来,再调用这个form的reset方法,完工之后再把上传控件弄回去。这个form无需进入DOM结构便能正常工作,所以不用担心会对界面有任影响。


2.e.outerHTML=e.outerHTML

document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;

这个很好理解,自己付给自己,最后还是自己。如果file有值了,比如D:\ebook\test.txt 那么document.getElementById("file").outerHTML的值为:

<input type="file" name="file" id="file" value="D:\ebook\test.txt"/>

这时

document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;

后 document.getElementById("file")也清空

这是因为file控件是只读的,用js给file控件赋值是没用的。

火狐好像不支持

3.笨办法,重写这个input

<span id="upfileSpan"><input name="upfile" id="upfile" type="file" /></span>

function clearUpload(){

 document.getElementById("upfileSpan").innerHTML=document.getElementById("upfileSpan").innerHTML; 

}

IE6、IE8、FireFox测试通过


抱歉!评论已关闭.