清空文件上传控件的值

2016年06月08日 HTML, javascript 暂无评论 阅读 40 views 次

进行文件上传时,若文件格式正确,那么就需要清空文件上传控件的value,让重新上传。那是无论是用JS还是用jquery都无法清空value的值,因为

在 HTML 文档中 ,<input type="file"> 标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性,保存了用户指定的文件的名称,为安全起见,file-upload 元素的value 属性是只读的,不允许程序员修改它的值,并且HTML value 属性也会被忽略

但是有时候又的确需要置空该控件的value值。在网上搜罗了下,加上我自己的测试,差不多有以下几个方法:

1、使用replace方法,将文件上传控件的value替换成空。具体代码如下:

file_input_obj.outerHTML=file_input_obj.outerHTML.replace(/(value=").+"/i,"$1"");

这个代码我测试过了,可以置空,通过F12可以看到,控件的value值的确置空了,但是若用JS或者jQuery去取该控件的值,还是会获取到置空前的值。所以,该方法若是只满足视觉效果还是可以的,实际判断是否为空应该是不行的。

 

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

而上传控件又没有一个clear()之类的函 数,所以这使得无刷新上传文件显得稍稍不爽,尤其对于追求完美的开发者而言。然而今天在做一个Asp.net控件时却发现不得不需要清空一下上传控件,于 是便开始想办法。网上搜索一番,不出所料,没有找到什么结果。关键时刻只能靠自己了。

仔细想想,上传控件是不是任何时候都不可能被清空 呢?答案是否,form.reset()方法能够重置所有得表单元素。只要调用inputFile.form.reset(),那么上传控件的值就清空 了,不要担心它被恢复为某个默认值,value是只读的,你不能为它设置某个初始值。

于是开始设想,如果我只需要reset一下上传控 件,怎么解决?其他的表单元素要保持原状。一个可行的方法是,reset之前获取所有的表单域的值,之后再用这些值填充,虽然显得稍微复杂,但借助 prototype框架的Form对象提供的方法,还是很容易做到的。这样就能够得到需要的结果了。

然而这个方法还是不够优雅,沿着思路 继续想下去,不难得到改进的方法:创建一个新的form,把上传控件临时放过来,再调用这个form的reset方法,完工之后再把上传控件弄回去。这个 form无需进入DOM结构便能正常工作,所以不用担心会对界面有任影响。下面给出函数实现,经过验证工作良好,呵呵。

Js代码  收藏代码
  1. function clearFileInput(file){
  2.     var form=document.createElement(&#39form');
  3.     document.body.appendChild(form);
  4.     //记住file在旧表单中的的位置
  5.     var pos=file.nextSibling;
  6.     form.appendChild(file);
  7.     form.reset();
  8.     pos.parentNode.insertBefore(file,pos);
  9.     document.body.removeChild(form);
  10. }

方法二:比较简单了 重新建立个 file 就可以了。

Html代码  收藏代码
  1. <span   id=span1>
  2.     <input   name=ab   type=file>
  3. </span>
  4. <input   name=button1   type=button   value="按"   onclick=show()>
  5. <script   language=javascript>
  6. function  show(){
  7.  document.getElementById("span1").innerHTML="<input   name=ab   type=file>";
  8. }
  9. </script>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

上面两个方法总结起来就是:

2、重置表单:

使用重置的方法,从理论上来讲是可以行的,但是打击面是不是太广,要是表单中的东西较少还行,要是太多就会有点麻烦。

 

3、重新新建,进行替换:

文件上传控件检测到选了文件之后,判断是否有效,要是无效,直接新建或克隆一个type='file'的input,然后直接替换。我已经测试过该方法可行,且一对一,不会影响到别的控件和功能。

 

4、采用视觉效果:

如前面写的实现单图片预览的一样,写三个input,一个text文本框,用来展示文件路径;一个button,用来表示“浏览”按钮,一个type=file的input,用来实现真正的上传。再使用CSS,将前面两个文本框覆盖掉第三个上传控件,这样子在视觉上看起来还是一个文件上传控件,代码如下:

Html代码  收藏代码
  1. <input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框,用来显示上传的文件路径-->
  2. <input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮-->
  3. <input type="file" name="applogo" class="file" size="28"/> <!--真正的浏览按钮,用来打开上传页面,前面的“浏览”按钮掩盖此按钮,为好看-->

在文件上传控件上添加onchange事件,选择完文件之后触发该事件。该事件直接从file的input中取值,赋值到第一个文本框中用来展示文件路径,以后的校验、判断是否为空都从第一个文本框取值,清空也只是清空第一个文本框的值。这样子就跟文件上传控件没有半毛钱关系了。不过有个缺点:太麻烦,东西多难维护。

 

综上,个人觉得最好的方法还是第三种:重新新建,进行替换。

给我留言

您必须 登录 才能发表留言!