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