如何重置<input type =“file”>
我正在开发VS2012和Javascript的地铁应用程序
我想重置我的文件input的内容：
<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" /> 我该怎么做？
@ dhaval-marthak在注释中显示的jQuery解决scheme显然是可行的，但是如果你看看实际的jQuery调用，很容易看出jQuery正在做什么，只需要将value属性设置为空string即可。 所以在“纯粹的”JavaScript中，它将是：
document.getElementById("uploadCaptureInputFile").value = "";
您需要将<input type = “file”>包装到<form>标签中，然后通过重置表单来重置input：
onClick="this.form.reset()"
这是最好的解决scheme：
input.value = '' if(!/safari/i.test(navigator.userAgent)){ input.type = '' input.type = 'file' }
所有的答案在这里是最快的解决scheme。 没有input克隆，没有表格重置！
我在所有的浏览器（它甚至有IE8的支持）检查它。
您可以将其克隆并自行更换，并附上所有事件：
<input type="file" id="control">
和
var input = $("#control"); function something_happens() { input.replaceWith(input.val('').clone(true)); };
感谢：Css-tricks.com
如果您有以下情况：
<input type="file" id="fileControl">
那么就做：
$("#fileControl").val('');
重置文件控制。
解
下面的代码用jQuery工作。 它适用于每个浏览器，并允许保留事件和自定义属性。
var $el = $('#uploadCaptureInputFile'); $el.wrap('<form>').closest('form').get(0).reset(); $el.unwrap();
DEMO
看到这个jsFiddle的代码和演示。
链接
有关更多信息，请参阅如何使用JavaScript重置文件input 。
另一个解决scheme（不selectHTML DOM元素）
如果您在该input中添加了“更改”事件侦听器，则可以在JavaScript代码中调用（对于某些指定的条件）：
event.target.value = '';
例如在HTML中：
<input type="file" onChange="onChangeFunction(event)">
在JavaScript中：
onChangeFunction(event) { let fileList = event.target.files; let file = fileList[0]; let extension = file.name.split('.')[1].toLowerCase(); if (extension === 'jpg') { alert('Good file extension!'); } else { event.target.value = ''; alert('Wrong file extension! File input is cleared.'); }
随着IE 10我解决了这个问题：
var file = document.getElementById("file-input"); file.removeAttribute('value'); file.parentNode.replaceChild(file.cloneNode(true),file);
其中：
<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>
只要使用：
$('input[type=file]').val('');
你应该试试这个：
$("#uploadCaptureInputFile").val('');
jQuery解决scheme：
$('input').on('change',function(){ $(this).get(0).value = ''; $(this).get(0).type = ''; $(this).get(0).type = 'file'; });
你不能重置，因为它是一个只读文件。 你可以克隆它来解决问题。
如果您的表单中有多个文件，但只希望其中的一个被重置：
如果你使用boostrap，jquery，filestyle来显示input文件的forms：
$("#"+idInput).filestyle('clear');
var fileInput = $('#uploadCaptureInputFile'); fileInput.replaceWith(fileInput.val('').clone(true));
也适用于dynamic控制。
使用Javascript
<input type="file" onchange="FileValidate(this)" /> function FileValidate(object) { if ((object.files[0].size / 1024 / 1024) > 1) { //greater than 1 MB $(object).val(''); } }
JQuery的
<input type="file" class="UpoloadFileSize"> $(document).ready(function () { $('.UpoloadFileSize').bind('change', function () { if ((this.files[0].size / 1024000) > 1.5) { //greater than 1.5 MB $(this).val(''); alert('Size exceeded !!'); } }); });
重置input文件是非常单一的
$('input[type=file]').val(null);
如果绑定在更改表单的其他字段中重置文件，或者使用ajax加载表单。
这个例子是适用的
例如， select器是$('input[type=text]')或表单的任何元素
事件 click ， change或任何事件
$('body').delegate('event', 'selector', function(){ $('input[type=file]').val(null) ; });
您应该重置包含文件input元素的表单
$('#formId').get(0).reset();
这将重置表单中的所有元素
只需使用这个来使input文件为空：
$('#uploadCaptureInputFile').val('');
