blocks|key|3293173|text|document.getElementById('your_input_id').value=''|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3293174|编辑：|unstyled|offset|length|style|BOLD|3293175|这个不适用于IE和opera，但似乎适用于firefox、safari和chrome。|3293176|entityMap^0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@$G|Q|H|R|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>document.getElementById('your_input_id').value=''
</code></pre>

Edit: 
This one doesn't work in IE and opera, but seems to work for firefox, safari and chrome.

blocks|key|3293196|text|您需要将其替换为新的文件输入。下面是如何使用jQuery完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3293197|var+inputFile+=+$('input[type=field]');
inputFile.wrap('<div+/>');|code-block|syntax|javascript|3293198|当您需要清除输入字段时(例如，在某些事件中)，请使用下面这一行：|3293199|inputFile.parent().html(+inputFile.parent().html()+);|3293200|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

U need replace it with new file input.
Here is how it can be done with jQuery:

<pre><code>var inputFile = $('input[type=field]');
inputFile.wrap('&lt;div /&gt;');
</code></pre>

and use this line when you need to clear input field (on some event for example):

<pre><code>inputFile.parent().html( inputFile.parent().html() );
</code></pre>

blocks|key|328686|text|tl;dr：对于现代浏览器，只需使用|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|328687|input.value+=+'';|code-block|syntax|javascript|328688|328689|老生常谈：|328690|这样如何：|328691|input.type+=+"text";
input.type+=+"file";|328692|我仍然需要理解为什么这个不能与webkit一起工作。|328693|无论如何，这适用于IE9>，火狐和Opera。|328694|webkit的情况是，我似乎无法将其改回文件。|328695|对于IE8，情况是它抛出了一个安全异常。|328696|编辑:适用于webkit、Opera和Firefox.js的|328697|input.value+=+'';|328698|(请将上述答案与此建议进行核对)|328699|我将看看是否可以找到一种更好、更干净的方式来完成跨浏览器的工作，而不需要GC。|328700|Edit2:|328701|try{
++++inputs[i].value+=+'';
++++if(inputs[i].value){
++++++++inputs[i].type+=+"text";
++++++++inputs[i].type+=+"file";
++++}
}catch(e){}|328702|适用于大多数浏览器。不适用于IE+<+9，仅此而已。|328703|在火狐20、chrome+24、opera+12、IE7、IE8、IE9和IE10上进行了测试。|328704|entityMap^0|0|5|0|0|0|0|0|0|C|E|0|0|N|0|0|N|0|0|K|0|0|U|0|0|0|G|0|0|13|0|0|6|0|0|0|Q|0|0|1C|0^^$0|@$1|2|3|4|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1M|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1N|8|@]|D|@]|E|$]]|$1|P|3|Q|5|H|7|1O|8|@]|D|@]|E|$I|J]]|$1|R|3|S|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1Y|8|@$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|21|8|@$9|22|A|23|B|C]]|D|@]|E|$]]|$1|11|3|12|5|H|7|24|8|@]|D|@]|E|$I|J]]|$1|13|3|14|5|6|7|25|8|@$9|26|A|27|B|C]]|D|@]|E|$]]|$1|15|3|16|5|6|7|28|8|@$9|29|A|2A|B|C]]|D|@]|E|$]]|$1|17|3|18|5|6|7|2B|8|@$9|2C|A|2D|B|C]]|D|@]|E|$]]|$1|19|3|1A|5|H|7|2E|8|@]|D|@]|E|$I|J]]|$1|1B|3|1C|5|6|7|2F|8|@$9|2G|A|2H|B|C]]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|2I|8|@$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|2L|8|@]|D|@]|E|$]]]|1G|$]]

tl;dr: For modern browsers, just use
<pre><code>input.value = '';
</code></pre>
<hr />
<h3>Old answer:</h3>
How about:
<pre><code>input.type = &quot;text&quot;;
input.type = &quot;file&quot;;
</code></pre>
I still have to understand why this does not work with webkit.
Anyway, this works with IE9&gt;, Firefox and Opera. 
The situation with webkit is that I seem to be unable to change it back to file. 
With IE8, the situation is that it throws a security exception.
Edit:
For webkit, Opera and firefox this works, though:
<pre><code>input.value = '';
</code></pre>
(check the above answer with this proposal)
I'll see if I can find a nice cleaner way of doing this cross-browser without the need of the GC.
Edit2:
<pre><code>try{
 inputs[i].value = '';
 if(inputs[i].value){
 inputs[i].type = &quot;text&quot;;
 inputs[i].type = &quot;file&quot;;
 }
}catch(e){}
</code></pre>
Works with most browsers. Does not work with IE &lt; 9, that's all. 
Tested on firefox 20, chrome 24, opera 12, IE7, IE8, IE9, and IE10.

blocks|key|3079883|text|将该值设置为''并不适用于所有浏览器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3079884|相反，尝试将值设置为null，如下所示：|3079885|document.getElementById('your_input_id').value=+null;|code-block|syntax|javascript|3079886|编辑:我得到了不允许JS设置文件输入的非常合理的安全原因，然而，提供一种简单的机制来清除已经选择了输出的似乎是合理的。我尝试使用空字符串，但并不是在所有浏览器上都有效，NULL在我尝试过的所有浏览器(Opera、Chrome、FF、IE11%2B和Safari)上都可以使用。|BOLD|3079887|编辑:请注意，设置为NULL在所有浏览器上都有效，而设置为空字符串则不能。|3079888|entityMap^0|6|2|0|A|4|0|0|1G|2C|2C|4|0|0|11|A|4|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|10|8|@$9|11|A|12|B|O]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|15|8|@$9|16|A|17|B|O]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$]]

Setting the value to <code>''</code> does not work in all browsers.

Instead try setting the value to <code>null</code> like so:

<pre><code>document.getElementById('your_input_id').value= null;
</code></pre>

EDIT:
I get the very valid security reasons for not allowing JS to set the file input, however it does seem reasonable to provide a simple mechanism for clearing already selecting output. I tried using an empty string but it did not work in all browsers, <code>NULL</code> worked in all the browsers I tried (Opera, Chrome, FF, IE11+ and Safari).

EDIT:
Please note that setting to <code>NULL</code> works on all browsers while setting to an empty string did not.

blocks|key|326356|text|上面的答案提供了一些笨拙的解决方案，原因如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|326357|326358|我不喜欢先wrap+input，然后获取html，这非常复杂，而且很脏。|ordered-list-item|offset|length|style|CODE|326359|跨浏览器JS很方便，在这种情况下，似乎有太多的未知因素，无法可靠地使用type切换(这又有点脏)并将value设置为html|326360|326361|因此，我向您提供基于jQuery的解决方案：|326362|$('#myinput').replaceWith($('#myinput').clone())|code-block|syntax|javascript|326363|它做到了它所说的，它用它自己的克隆替换了输入。克隆不会选择该文件。|326364|优势：|326365|326366|简单易懂的代码|326367|没有笨拙的包装或类型|326368|浏览器兼容性(如果我在这里错了，请纠正我)|326369|结果:快乐的程序员|326370|entityMap^0|0|0|5|4|A|5|0|Z|4|1E|5|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1A|8|@$F|1B|G|1C|H|I]|$F|1D|G|1E|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|1F|8|@$F|1G|G|1H|H|I]|$F|1I|G|1J|H|I]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1L|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1M|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1N|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1O|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|E|7|1Q|8|@]|9|@]|A|$]]|$1|10|3|11|5|E|7|1R|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1S|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|1T|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|17|$]]

The above answers offer somewhat clumsy solutions for the following reasons:

<ol>
<li>I don't like having to <code>wrap</code> the <code>input</code> first and then getting the html, it is very involved and dirty.</li>
<li>Cross browser JS is handy and it seems that in this case there are too many unknowns to reliably use <code>type</code> switching (which, again, is a bit dirty) and setting <code>value</code> to <code>''</code></li>
</ol>

So I offer you my jQuery based solution:

<pre><code>$('#myinput').replaceWith($('#myinput').clone())
</code></pre>

It does what it says, it replaces the input with a clone of itself. The clone won't have the file selected.

Advantages:

<ol>
<li>Simple and understandable code</li>
<li>No clumsy wrapping or type switching</li>
<li>Cross browser compatibility (correct me if I am wrong here)</li>
</ol>

Result:
Happy programmer

blocks|key|3293387|text|不幸的是，上面的答案似乎都不能涵盖所有的基础--至少在我用vanilla+javascript进行测试时是这样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3293388|3293389|.value+=+null似乎适用于FireFox、Chome、Opera和IE11+(但不适用于IE8/9/10)+FireFox上的(以及jQuery中的.clone()+)似乎复制了FireFox上的.value，因此使克隆毫无意义。|unordered-list-item|offset|length|style|CODE|BOLD|3293390|3293391|下面是我写的javascript函数，适用于FireFox+(27和28)，Chrome+(33)，IE+(8，9，10，11)，Opera+(17)……这是我目前唯一可以测试的浏览器。|3293392|function+clearFileInput(ctrl)+{
++try+{
++++ctrl.value+=+null;
++}+catch(ex)+{+}
++if+(ctrl.value)+{
++++ctrl.parentNode.replaceChild(ctrl.cloneNode(true),+ctrl);
++}
}|code-block|syntax|javascript|3293393|ctrl参数本身就是文件输入，因此该函数将被调用为...|3293394|clearFileInput(document.getElementById("myFileInput"));|3293395|entityMap^0|0|0|0|D|27|8|2V|6|19|N|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|10|8|@$F|11|G|12|H|I]|$F|13|G|14|H|I]|$F|15|G|16|H|I]|$F|17|G|18|H|J]]|9|@]|A|$]]|$1|K|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1B|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1C|8|@$F|1D|G|1E|H|I]]|9|@]|A|$]]|$1|U|3|V|5|P|7|1F|8|@]|9|@]|A|$Q|R]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$]]

Unfortunately none of the above answers appear to cover all the bases - at least not with my testing with vanilla javascript.

<ul>
<li><code>.value = null</code> appears to work on FireFox, Chome, Opera and IE11 (but not IE8/9/10) </li>
<li><code>.cloneNode</code> (and <code>.clone()</code> in jQuery) on FireFox appears to copy the <code>.value</code> over, therefore making the clone pointless.</li>
</ul>

So here is the vanilla javascript function I have written that works on FireFox (27 and 28), Chrome (33), IE (8, 9, 10, 11), Opera (17)... these are the only browsers currently available to me to test with.

<pre><code>function clearFileInput(ctrl) {
 try {
 ctrl.value = null;
 } catch(ex) { }
 if (ctrl.value) {
 ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
 }
}
</code></pre>

The <code>ctrl</code> parameter is the file input itself, so the function would be called as...

<pre><code>clearFileInput(document.getElementById("myFileInput"));
</code></pre>

blocks|key|3079975|text|有3种方法可以用javascript清除文件输入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3079976|3079977|set值属性设置为空或null。|ordered-list-item|offset|length|style|BOLD|3079978|3079979|适用于IE11%2B和其他现代的browsers.|3079980|Create，一个新的文件输入元素，并取代旧的。|unordered-list-item|3079981|3079982|缺点是您将丢失事件侦听器，并通过form.reset()方法扩展properties.|3079983|Reset所有者窗体。|3079984|3079985|为了避免影响同一所有者表单中的其他输入元素，我们可以创建一个新的空表单，并将文件输入元素附加到这个新表单并重置它。这种方式适用于所有浏览器。|3079986|我写了一个javascript函数。演示：+http://jsbin.com/muhipoye/1/|3079987|function+clearInputFile(f){
++++if(f.value){
++++++++try{
++++++++++++f.value+=+'';+//for+IE11,+latest+Chrome/Firefox/Opera...
++++++++}catch(err){+}
++++++++if(f.value){+//for+IE5+~+IE10
++++++++++++var+form+=+document.createElement('form'),
++++++++++++++++parentNode+=+f.parentNode,+ref+=+f.nextSibling;
++++++++++++form.appendChild(f);
++++++++++++form.reset();
++++++++++++parentNode.insertBefore(f,ref);
++++++++}
++++}
}|code-block|syntax|javascript|3079988|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/muhipoye/1/^0|0|0|0|G|0|0|0|0|O|0|0|0|0|B|0|0|0|I|3|M|S|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1E|8|@$F|1F|G|1G|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1J|8|@$F|1K|G|1L|H|I]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@]|A|$]]|$1|S|3|T|5|O|7|1O|8|@$F|1P|G|1Q|H|I]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1S|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1T|8|@$F|1U|G|1V|H|I]]|9|@$F|1W|G|1X|1|1Y]]|A|$]]|$1|Z|3|10|5|11|7|1Z|8|@]|9|@]|A|$12|13]]|$1|14|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

There's 3 ways to clear file input with javascript:

<ol>
<li>set value property to empty or null. 

Works for IE11+ and other modern browsers.</li>
<li>Create an new file input element and replace the old one.

The disadvantage is you will lose event listeners and expando properties.</li>
<li>Reset the owner form via form.reset() method. 

To avoid affecting other input elements in the same owner form, we can create an new empty form and append the file input element to this new form and reset it. This way works for all browsers.</li>
</ol>

I wrote a javascript function. demo: <a href="http://jsbin.com/muhipoye/1/" rel="noreferrer">http://jsbin.com/muhipoye/1/</a>

<pre><code>function clearInputFile(f){
 if(f.value){
 try{
 f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
 }catch(err){ }
 if(f.value){ //for IE5 ~ IE10
 var form = document.createElement('form'),
 parentNode = f.parentNode, ref = f.nextSibling;
 form.appendChild(f);
 form.reset();
 parentNode.insertBefore(f,ref);
 }
 }
}
</code></pre>

blocks|key|3293410|text|解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3293411|下面的代码适用于我在jQuery上的工作。它可以在每个浏览器中工作，并允许保留事件和自定义属性。|3293412|var+$el+=+$('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();|code-block|syntax|javascript|3293413|演示|3293414|代码和演示请参见this+jsFiddle。|offset|length|3293415|链接|3293416|3293417|Clearing++using+jQuery|unordered-list-item|3293418|How+to+reset+file+input+with+JavaScript|3293419|3293420|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/gyrocode/yfeo529g/|1|https://stackoverflow.com/a/13351234/3549014|2|https://www.gyrocode.com/articles/how-to-reset-file-input-with-javascript/^0|0|0|0|0|8|D|0|0|0|0|0|M|1|0|0|13|2|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1C|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1D|8|@]|9|@$M|1E|N|1F|1|1G]]|A|$]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1J|8|@]|9|@$M|1K|N|1L|1|1M]]|A|$]]|$1|U|3|V|5|T|7|1N|8|@]|9|@$M|1O|N|1P|1|1Q]]|A|$]]|$1|W|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]|15|$5|10|11|12|A|$13|16]]|17|$5|10|11|12|A|$13|18]]]]

<h3>SOLUTION</h3>

The following code worked for me with jQuery. It works in every browser and allows to preserve events and custom properties.

<pre><code>var $el = $('#your-input-id');
$el.wrap('&lt;form&gt;').closest('form').get(0).reset();
$el.unwrap();
</code></pre>

<h3>DEMO</h3>

See <a href="https://jsfiddle.net/gyrocode/yfeo529g/" rel="noreferrer">this jsFiddle</a> for code and demonstration.

<h3>LINKS</h3>

<ul>
<li><a href="https://stackoverflow.com/a/13351234/3549014">Clearing &lt;input type='file' /&gt; using jQuery</a></li>
<li><a href="https://www.gyrocode.com/articles/how-to-reset-file-input-with-javascript/" rel="noreferrer">How to reset file input with JavaScript</a></li>
</ul>

blocks|key|3080005|text|我一直在寻找简单干净的方法来清除HTML文件输入，上面的答案都很棒，但它们都没有真正满足我的需求，直到我在web上遇到了一个简单而优雅的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3080006|var+$input+=+$("#control");

$input.replaceWith($input.val('').clone(true));|code-block|syntax|javascript|3080007|所有的荣誉都归功于Chris+Coyier。|offset|length|3080008|​|3080009|//+Referneces
var+control+=+$("#control"),
++++clearBn+=+$("#clear");

//+Setup+the+clear+functionality
clearBn.on("click",+function(){
++++control.replaceWith(+control.val('').clone(+true+)+);
});

//+Some+bound+handlers+to+preserve+when+cloning
control.on({
++++change:+function(){+console.log(+"Changed"+)+},
+++++focus:+function(){+console.log(++"Focus"++)+}
});|3080010|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input+type="file"+id="control">
 
<a+href="#"+id="clear">Clear</a>|3080011|3080012|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/author/chriscoyier/^0|0|0|9|C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|Q|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

I have been looking for simple and clean way to clear HTML file input, the above answers are great, but none of them really answers what i'm looking for, until i came across on the web with simple an elegant way to do it :

<pre><code>var $input = $("#control");

$input.replaceWith($input.val('').clone(true));
</code></pre>

all the credit goes to <a href="https://css-tricks.com/author/chriscoyier/" rel="nofollow noreferrer">Chris Coyier</a>.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Referneces
var control = $("#control"),
 clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
 control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
 change: function(){ console.log( "Changed" ) },
 focus: function(){ console.log( "Focus" ) }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;input type="file" id="control"&gt;
&lt;br&gt;&lt;br&gt;
&lt;a href="#" id="clear"&gt;Clear&lt;/a&gt;</code></pre>
</div>
</div>

blocks|key|323949|text|对我有帮助的是，我尝试使用循环来获取并上传最后选择的文件，而不是清空队列，它成功了。下面是代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323950|for+(int+i+=+0;+i+<=+Request.Files.Count-1;+i%2B%2B)
{
+HttpPostedFileBase+uploadfile+=+files[i];
+Stream+fs+=+uploadfile.InputStream;
+BinaryReader+br+=+new+BinaryReader(fs);
+Byte[]+imageBytes+=+br.ReadBytes((Int32)fs.Length);
}|code-block|syntax|javascript|323951|希望这能对你有所帮助。|323952|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

What helped me is, I tried to fetch and upload the last selected file using a loop, instead of clearing out the queue, and it worked. Here is the code. 

<pre><code>for (int i = 0; i &lt;= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}
</code></pre>

Hope this might help some.

blocks|key|323954|text|我也遇到了同样的问题，于是我想出了这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323955|​|323956|var+file+=+document.querySelector('input');
var+emptyFile+=+document.createElement('input');
emptyFile.type+=+'file';

document.querySelector('button').onclick+=+function(){
++file.files+=+emptyFile.files;
}|code-block|syntax|javascript|323957|<input+type='file'>
<button>clear</button>|323958|323959|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

I was having same problem and i came up with this. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
 file.files = emptyFile.files;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='file'&gt;
&lt;button&gt;clear&lt;/button&gt;</code></pre>
</div>
</div>

blocks|key|323961|text|我尝试了大多数解决方案，但似乎没有人管用。然而，我在下面找到了它的漫步。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323962|表单的结构是：form+=>+label，input和submit+button。在我们选择一个文件后，通过在JavaScript中手动执行此操作，文件名将通过标签显示。|offset|length|style|CODE|323963|所以我的策略是:最初submit+button是禁用的，在选择一个文件之后，submit按钮的disabled属性将被删除，这样我就可以提交文件了。在我提交之后，我清除了label，这使它看起来像是清除了文件input，但实际上并非如此。然后，我将再次禁用提交按钮，以防止提交表单。|323964|通过设置submit+button+disable或不设置，我会多次停止提交文件，除非我选择另一个文件。|323965|entityMap^0|0|7|4|F|5|L|5|R|D|0|H|6|1B|8|2D|5|2W|5|0|B|6|I|7|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]|$D|R|E|S|F|G]|$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]|$D|12|E|13|F|G]|$D|14|E|15|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|M|$]]

I tried most of solutions but did not seem anyone to work. However I found a walk around for it below.

The structure of the form is: <code>form</code> => <code>label</code>, <code>input</code> and <code>submit button</code>. After we choose a file, the filename will be shown by the label by doing so manually in JavaScript. 

So my strategy is: initially the submit <code>button</code> is disabled, after a file is chosen, the submit button <code>disabled</code> attribute will be removed such that I can submit file. After I submit, I clear the <code>label</code> which makes it look like I clear the file <code>input</code> but actually not. Then I will disable the submit button again to prevent from submitting the form.

By setting the submit <code>button</code> <code>disable</code> or not, I stop the file from submitted many times unless I choose another file.

blocks|key|3080071|text|这实际上很简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3080072|document.querySelector('#input-field').value+=+'';|code-block|syntax|javascript|3080073|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

That's actually quite easy.

<pre><code>document.querySelector('#input-field').value = '';
</code></pre>

blocks|key|326450|text|这是我的两点意见，输入文件被存储为数组，所以下面是如何将其设为空的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|326451|document.getElementById('selector').value+=+[]|code-block|syntax|javascript|326452|这将返回一个空数组，并且在所有浏览器上都有效|326453|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here are my two cents, the input files are stored as array so here is how to null it

<pre><code>document.getElementById('selector').value = []
</code></pre>

this return an empty array and works on all browsers

blocks|key|3080095|text|我更改为键入文本，然后使用setAttribute重新键入为文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3080096|'<input+file-model="thefilePic"+style="width:95%25;"+type="file"+name="file"+id="filepicture"+accept="image/jpeg"+/>'

'var+input=document.querySelector('#filepicture');'

if(input+!=+null)
{
++++input.setAttribute("type",+"text");
++++input.setAttribute("type",+"file");
}|code-block|syntax|javascript|3080097|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I changed to type text and back to type to file using setAttribute
<pre><code>'&lt;input file-model=&quot;thefilePic&quot; style=&quot;width:95%;&quot; type=&quot;file&quot; name=&quot;file&quot; id=&quot;filepicture&quot; accept=&quot;image/jpeg&quot; /&gt;'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
 input.setAttribute(&quot;type&quot;, &quot;text&quot;);
 input.setAttribute(&quot;type&quot;, &quot;file&quot;);
}
</code></pre>

blocks|key|3293508|text|input.value+=+null是一个有效的方法，但是如果从onclick事件调用，它只会触发input的change事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3293509|解决方案是在需要重置输入时手动调用onchange处理程序。|3293510|function+reset_input(input)+{
++++$(input)[0].value+=+null;
++++input_change_handler();
}
function+input_change_handler()+{
++++//+this+happens+when+there's+been+a+change+in+file+selection

++++if+($(input)[0].files.length)+{
++++++++//+file(s)+selected
++++}+else+{
++++++++//+nothing+is+selected
++++}
}
$(input).on('change',+input_change_handler);|code-block|syntax|javascript|3293511|entityMap^0|0|I|W|7|1J|6|0|H|8|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

the <code>input.value = null</code> is a working method, however it will only trigger input's <code>change</code> event if called from an <code>onclick</code> event.
Solution to that would be calling that <code>onchange</code> handler manually whenever you need to reset the input.
<pre><code>function reset_input(input) {
 $(input)[0].value = null;
 input_change_handler();
}
function input_change_handler() {
 // this happens when there's been a change in file selection

 if ($(input)[0].files.length) {
 // file(s) selected
 } else {
 // nothing is selected
 }
}
$(input).on('change', input_change_handler);

</code></pre>

blocks|key|3293513|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3293514|const+clear+=+(event)+=>{event.target.value+=+[+];}
clear("input_id");+|code-block|syntax|javascript|3293515|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me.
<pre><code>const clear = (event) =&gt;{event.target.value = [ ];}
clear(&quot;input_id&quot;); 
</code></pre>

blocks|key|3293534|text|试着这样简单，它是有效的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3293535|let+input+=+elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;|code-block|syntax|javascript|3293536|这将重置输入|3293537|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try this easy and it works
<pre><code>let input = elem.querySelector('input[type=&quot;file&quot;]');
input.outerHTML=input.outerHTML;
</code></pre>
this will reset the input

blocks|key|324008|text|一个-在我的世界里一个简单的干净的解决方案-是，设置文件输入文件为一个清晰的FileList。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|324009|编辑:正如SteJ所说的--这不适用于Safari。|324010|因为我们不能直接创建一个FileList+-i用户DataTransfer为"hack“|324011|@$input[0].files=new+DataTransfer().files+|code-block|syntax|javascript|324012|或|324013|file_input_node.files=new+DataTransfer().files+|324014|entityMap^0|12|8|0|0|C|8|P|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

An - in my world easy an clean solution - is, to set the file inputs files to a clear <code>FileList</code>.
EDIT: as SteJ told - this ist not working with Safari.
Since we can not create a <code>FileList</code> directly - I user <code>DataTransfer</code> as &quot;hack&quot;
<pre><code>@$input[0].files=new DataTransfer().files 
</code></pre>
or
<pre><code>file_input_node.files=new DataTransfer().files 
</code></pre>

I want to clear the file input in my form.

I know about setting the sources to the same method... But that method wont erase the selected file path.

Note: I would like to avoid having to reload the page, reset the form or perform an AJAX call.

Is this possible?

How can I clear an HTML file input with JavaScript?

jQuery

我想清除表单中的文件输入。我知道如何将信号源设置为相同的方法...但该方法不会擦除选定的文件路径。注释：我希望避免重新加载页面、重置表单或执行AJAX调用。这个是可能的吗？

问如何使用JavaScript清除HTML文件输入？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript清除HTML文件输入？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript清除HTML文件输入？
EN