看了下非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测试通过