通过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的文件。
