通过JavaScript清除HTMLfile upload字段

我想在用户select另一个选项时重置file upload字段。

这是可能通过JavaScript? 我怀疑file upload元素被区别对待,因为它与用户的文件系统交互,也许它是不可变的。

基本上,我想要的是类似(伪代码):

// Choose selecting existing file $('#select-file').bind('focus', function() { // Clear any files currently selected in #upload-file $('#upload-file').val(''); }) ; // Choose uploading new one - this works ok $('#upload-file').bind('focus', function() { // Clear any files currently selected in #select-file $('#select-file').val(''); }) ; 

您不能在大多数浏览器中设置input值,但是您可以创build一个新元素,从旧元素中复制属性,然后交换这两个元素。

给定一个表单,如:

 <form> <input id="fileInput" name="fileInput" type="file" /> </form> 

直接的DOM方式:

 function clearFileInput(id) { var oldInput = document.getElementById(id); var newInput = document.createElement("input"); newInput.type = "file"; newInput.id = oldInput.id; newInput.name = oldInput.name; newInput.className = oldInput.className; newInput.style.cssText = oldInput.style.cssText; // TODO: copy any other relevant attributes oldInput.parentNode.replaceChild(newInput, oldInput); } clearFileInput("fileInput"); 

简单的DOM方式。 在不喜欢文件input的旧浏览器中,这可能不起作用:

 oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput); 

jQuery方式:

 $("#fileInput").replaceWith($("#fileInput").val('').clone(true)); // .val('') required for FF compatibility as per @nmit026 

通过jQuery重置整个表单: https : //stackoverflow.com/a/13351234/1091947

现在,在2014年,具有id的input元素支持函数val('')

对于input –

 <input type="file" multiple="true" id="File1" name="choose-file" /> 

这js清除input元素 –

 $("#File1").val(''); 

是的,上传元素在不同的浏览器中受到保护,无法直接操作。 但是,您可以从DOM树中删除元素,然后通过JavaScript在其位置插入一个新元素。 那会给你同样的结果。

有些东西是:

 $('#container-element').html('<input id="upload-file" type="file"/>'); 

我最终使用的代码是,

 clearReviewFileSel: function() { var oldInput = document.getElementById('edit-file-upload-review-pdf') ; var newInput = document.createElement('input'); newInput.id = oldInput.id ; newInput.type = oldInput.type ; newInput.name = oldInput.name ; newInput.size = oldInput.size ; newInput.class = oldInput.class ; oldInput.parentNode.replaceChild(newInput, oldInput); } 

感谢大家的build议和指针!

他们没有获得焦点事件,所以你必须使用这样的技巧:清除它的唯一方法是清除整个表单

 <script type="text/javascript"> $(function() { $("#wrapper").bind("mouseover", function() { $("form").get(0).reset(); }); }); </script> <form> <div id="wrapper"> <input type=file value="" /> </div> </form> 

真的很喜欢像这样简单:)

 $('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>'); 

尝试这个工作很好

 document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML; 

为了兼容性,当ajax不可用时,设置.val(''),或者它将重新发送input中仍然存在的最后一个ajax上传的文件。 以下应该正确清除input,同时保留.on()事件:

 var input = $("input[type='file']"); input.html(input.html()).val(''); 

简单的scheme:

 document.getElementById("upload-files").value = ""; 

这个jQuery在IE11,Chrome 53和Firefox 49中为我工作:

 cloned = $("#fileInput").clone(true); cloned.val(""); $("#fileInput").replaceWith(cloned); 

试试这个代码…

 $("input[type=file]").wrap("<div id='fileWrapper'/>"); $("#fileWrapper").append("<div id='duplicateFile' style='display:none'>"+$("#fileWrapper").html()+" </div>"); $("#fileWrapper").html($("#duplicateFile").html()); 

jQuerytesting方法在FF和Chrome中正常工作:

 $(function(){ $.clearUploadField = function(idsel){ $('#your-id input[name="'+idsel+'"]').val("") } }); 

更适合我的更短的version ,如下所示:

 document.querySelector('#fileUpload').value = ""; 

如果您有以下情况:

 <input type="file" id="FileSelect"> 

那么就做:

 $("#FileSelect").val(''); 

重置或清除最后select的文件。