清空文件上传控件的值 JS

进行文件上传时，若文件格式正确，那么就需要清空文件上传控件的value，让重新上传。那是无论是用JS还是用jquery都无法清空value的值，因为
http://pengfeng.iteye.com/blog/756863 写道在 HTML 文档中，标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性，保存了用户指定的文件的名称，为安全起见，file-upload 元素的value 属性是只读的，不允许程序员修改它的值，并且HTML value 属性也会被忽略但是有时候又的确需要置空该控件的value值。在网上搜罗了下，加上我自己的测试，差不多有以下几个方法：
1、使用replace方法，将文件上传控件的value替换成空。具体代码如下：
file_input_obj.outerHTML=file_input_obj.outerHTML.replace(/(value=https://www.it610.com/").+\"/i,"$1\"");
【清空文件上传控件的值】这个代码我测试过了，可以置空，通过F12可以看到，控件的value值的确置空了，但是若用JS或者jQuery去取该控件的值，还是会获取到置空前的值。所以，该方法若是只满足视觉效果还是可以的，实际判断是否为空应该是不行的。

以下转载的文章说到了两个方法：
转载链接：http://www.myexception.cn/web/2025234.html
转载内容：
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
方法一：
上传控件基础知识说明：
上传控件（）用于在客户端浏览并上传文件，用户选取的路径可以由value属性获取，但value属性是只读的，不能通过 javascript来赋值，这就使得不能通过value=""语句来清空它。很容易理解为什么只读，如果可以随意赋值的话，那么用户只要打开你的网页，你就可以随心所欲的上传他电脑上的文件了，呵呵，毕竟表单的submi是可以随便调用的。

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

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

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

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

function clearFileInput(file){ var form=document.createElement('form'); document.body.appendChild(form); //记住file在旧表单中的的位置 var pos=file.nextSibling; form.appendChild(file); form.reset(); pos.parentNode.insertBefore(file,pos); document.body.removeChild(form); }

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

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
上面两个方法总结起来就是：
2、重置表单：
使用重置的方法，从理论上来讲是可以行的，但是打击面是不是太广，要是表单中的东西较少还行，要是太多就会有点麻烦。

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

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

在文件上传控件上添加onchange事件，选择完文件之后触发该事件。该事件直接从file的input中取值，赋值到第一个文本框中用来展示文件路径，以后的校验、判断是否为空都从第一个文本框取值，清空也只是清空第一个文本框的值。这样子就跟文件上传控件没有半毛钱关系了。不过有个缺点：太麻烦，东西多难维护。
综上，个人觉得最好的方法还是第三种：重新新建，进行替换。