blocks|key|342442|text|是的，upload元素受到保护，不能在不同的浏览器中直接操作。但是，您可以从DOM树中删除该元素，然后通过JavaScript在其位置插入一个新元素。这将会给你同样的结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342443|大致是这样的：|342444|$('#container-element').html('<input+id="upload-file"+type="file"/>');|code-block|syntax|javascript|342445|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Yes, the upload element is protected from direct manipulation in different browsers. However, you could erase the element from the DOM tree and then insert a new one in its place via JavaScript. That would give you the same result.</p>

<p>Something along the lines of:</p>

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


blocks|key|3327411|text|它们不会获得焦点事件，所以您必须使用这样的技巧:清除它的唯一方法是清除整个窗体|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3327412|<script+type="text/javascript">
++++$(function()+{
++++++++$("#wrapper").bind("mouseover",+function()+{
++++++++++++$("form").get(0).reset();
++++++++});
++++});
</script>

<form>
<div+id="wrapper">
++++<input+type=file+value=""+/>
</div>
</form>|code-block|syntax|javascript|3327413|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|$]]

<p>They don't get focus events, so you'll have to use a trick like this: only way to clear it is to clear the entire form</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
&lt;/script&gt;

&lt;form&gt;
&lt;div id="wrapper"&gt;
    &lt;input type=file value="" /&gt;
&lt;/div&gt;
&lt;/form&gt;
</code></pre>


blocks|key|341053|text|您不能在大多数浏览器中设置输入值，但您可以做的是创建一个新元素，复制旧元素的属性，然后交换这两个元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341054|给出一个类似这样的表单：|341055|<form>+
++++<input+id="fileInput"+name="fileInput"+type="file"+/>+
</form>|code-block|syntax|javascript|341056|直接的DOM方式：|341057|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");|341058|简单的DOM方式。这可能在不喜欢文件输入的旧浏览器中不起作用：|341059|oldInput.parentNode.replaceChild(oldInput.cloneNode(),+oldInput);|341060|jQuery方式：|341061|$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

//+.val('')+required+for+FF+compatibility+as+per+@nmit026|341062|通过jQuery：https://stackoverflow.com/a/13351234/1091947重置整个表单|offset|length|341063|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/13351234/1091947^0|0|0|0|0|0|0|0|0|0|9|18|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1F|8|@]|9|@$W|1G|X|1H|1|1I]]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<p>You can't set the input value in most browsers, but what you can do is create a new element, copy the attributes from the old element, and swap the two.</p>

<p>Given a form like:</p>

<pre><code>&lt;form&gt; 
    &lt;input id="fileInput" name="fileInput" type="file" /&gt; 
&lt;/form&gt;
</code></pre>

<p>The straight DOM way:</p>

<pre><code>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");
</code></pre>

<p>Simple DOM way. This may not work in older browsers that don't like file inputs:</p>

<pre><code>oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);
</code></pre>

<p>The jQuery way:</p>

<pre><code>$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026
</code></pre>

<p>Resetting the whole form via jQuery: <a href="https://stackoverflow.com/a/13351234/1091947">https://stackoverflow.com/a/13351234/1091947</a></p>


blocks|key|3114649|text|我最终使用的代码是，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3114650|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);+
}|code-block|syntax|javascript|3114651|感谢大家的建议和指点！|3114652|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|$]]

<p>The code I ended up using was,</p>

<pre><code>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); 
}
</code></pre>

<p>Thanks everyone for the suggestions and pointers!</p>


blocks|key|3114654|text|试试这段代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3114655|$("input[type=file]").wrap("<div+id='fileWrapper'/>");
$("#fileWrapper").append("<div+id='duplicateFile'+++style='display:none'>"%2B$("#fileWrapper").html()%2B"+++</div>");
$("#fileWrapper").html($("#duplicateFile").html());|code-block|syntax|javascript|3114656|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|$]]

<p>Try this code...</p>

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


blocks|key|3114666|text|真的喜欢像这样让事情变得简单:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3114667|$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');|code-block|syntax|javascript|3114668|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|$]]

<p>really like keep things simple like this :)</p>

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


blocks|key|3327448|text|jQuery测试方法在FF和Chrome中工作正常：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3327449|$(function(){
++++$.clearUploadField+=+function(idsel){
++++++++$('#your-id+input[name="'%2Bidsel%2B'"]').val("")+
++++}
});|code-block|syntax|javascript|3327450|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|$]]

<p>jQuery tested method working fine in FF &amp; Chrome:</p>

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


blocks|key|3327465|text|简单地说，在2014年，具有id的输入元素支持函数val('')。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3327466|对于输入-|3327467|<input+type="file"+multiple="true"+id="File1"+name="choose-file"+/>|code-block|syntax|javascript|3327468|这个js清除了input元素-|3327469|$("#File1").val('');|3327470|entityMap^0|P|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>Simply now in 2014 the input element having an id supports the function <code>val('')</code>.</p>

<p>For the input -</p>

<pre><code>&lt;input type="file" multiple="true" id="File1" name="choose-file" /&gt;
</code></pre>

<p>This js clears the input element -</p>

<pre><code>$("#File1").val('');
</code></pre>


blocks|key|341094|text|试试这个，它的效果很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341095|document.getElementById('fileUpload').parentNode.innerHTML+=+document.getElementById('fileUpload').parentNode.innerHTML;|code-block|syntax|javascript|341096|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|$]]

<p>try this its work fine </p>

<pre><code>document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML;
</code></pre>


blocks|key|342510|text|为了在ajax不可用时实现兼容性，请设置.val('')，否则它将重新发送输入中仍然存在的最后一个ajax上传的文件。以下代码应在保留.on()事件的同时正确清除输入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342511|var+input+=+$("input[type='file']");
input.html(input.html()).val('');|code-block|syntax|javascript|342512|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|$]]

<p>For compatibility when ajax is not available, set .val('') or it will resend the last ajax-uploaded file that is still present in the input.  The following should properly clear the input whilst retaining .on() events:</p>

<pre><code>var input = $("input[type='file']");
input.html(input.html()).val('');
</code></pre>


blocks|key|3327586|text|对我来说完美的更短的version，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3327587|document.querySelector('#fileUpload').value+=+"";|code-block|syntax|javascript|3327588|entityMap^0|A|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Shorter <code>version</code> that works perfect for me that is as follow:</p>

<pre><code>document.querySelector('#fileUpload').value = "";
</code></pre>


blocks|key|3114798|text|简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3114799|document.getElementById("upload-files").value+=+"";|code-block|syntax|javascript|3114800|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|$]]

<p>Simple solution:</p>

<pre><code>document.getElementById("upload-files").value = "";
</code></pre>


blocks|key|3114807|text|如果您有以下条件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3114808|<input+type="file"+id="FileSelect">|code-block|syntax|javascript|3114809|那就这样做：|3114810|$("#FileSelect").val('');|3114811|若要重置或清除上次选择的文件，请执行以下操作。|3114812|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>If you have the following:</p>

<pre><code>&lt;input type="file" id="FileSelect"&gt;
</code></pre>

<p>then just do:</p>

<pre><code>$("#FileSelect").val('');
</code></pre>

<p>to reset or clear last selected file.</p>


blocks|key|341161|text|这个jQuery在我的IE11、Chrome53和Firefox49上都能用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341162|cloned+=+$("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);|code-block|syntax|javascript|341163|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|$]]

<p>This jQuery worked for me in IE11, Chrome 53, and Firefox 49:</p>

<pre><code>cloned = $("#fileInput").clone(true);
cloned.val("");
$("#fileInput").replaceWith(cloned);
</code></pre>


blocks|key|3114859|text|我知道对于较老的浏览器和类似的浏览器，FormData应用程序接口不是很友好，但在许多情况下，您无论如何都在使用它(希望是testing+for+support)，所以这将工作得很好！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3114860|​|3114861|function+clearFile(form)+{
++//+make+a+copy+of+your+form
++var+formData+=+new+FormData(form);
++//+reset+the+form+temporarily,+your+copy+is+safe!
++form.reset();
++for+(var+pair+of+formData.entries())+{
++++//+if+it's+not+the+file,+
++++if+(pair[0]+!=+"uploadNameAttributeFromForm")+{
++++++//+refill+form+value
++++++form[pair[0]].value+=+pair[1];
++++}
++++
++}
++//+make+new+copy+for+AJAX+submission+if+you+into+that...
++formData+=+new+FormData(form);
}|code-block|syntax|javascript|3114862|3114863|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/web/api/formdata|1|https://github.com/New-Bamboo/example-ajax-upload/blob/master/public/index.html^0|J|8|0|1P|J|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]]]

<p>I know the <a href="https://developer.mozilla.org/en-US/docs/web/api/formdata" rel="nofollow noreferrer">FormData</a> api is not so friendly for older browsers and such, but in many cases you are anyways using it (and hopefully <a href="https://github.com/New-Bamboo/example-ajax-upload/blob/master/public/index.html" rel="nofollow noreferrer">testing for support</a>) so this will work fine!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>function clearFile(form) {
  // make a copy of your form
  var formData = new FormData(form);
  // reset the form temporarily, your copy is safe!
  form.reset();
  for (var pair of formData.entries()) {
    // if it's not the file, 
    if (pair[0] != "uploadNameAttributeFromForm") {
      // refill form value
      form[pair[0]].value = pair[1];
    }
    
  }
  // make new copy for AJAX submission if you into that...
  formData = new FormData(form);
}</code></pre>
</div>
</div>
</p>


blocks|key|342563|text|我用angular的ng2-file-upload遇到了这个问题。如果你正在寻找ng2-file-upload在angular上的解决方案，参考下面的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342564|HTML：|342565|<input+type="file"+name="myfile"+#activeFrameinputFile+ng2FileSelect+[uploader]="frameUploader"+(change)="frameUploader.uploadAll()"+/>|offset|length|style|CODE|BOLD|342566|组件|342567|import+{+Component,+OnInit,+ElementRef,+ViewChild+}+from+'@angular/core';|342568|@ViewChild('activeFrameinputFile')InputFrameVariable:+ElementRef;|342569|this.frameUploader.onSuccessItem+=+(item,+response,+status,+headers)+=>+{+this.InputFrameVariable.nativeElement.value+=+'';+};|342570|entityMap^0|0|0|0|W|1J|28|X|L|0|0|2|0|0|21|0|0|C|W|2|1G|D|C|K|Y|I|0|0|21|22|5|2P|Q|3G|2|27|I|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@$F|X|G|Y|H|I]|$F|Z|G|10|H|I]|$F|11|G|12|H|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|13|8|@$F|14|G|15|H|J]]|9|@]|A|$]]|$1|M|3|N|5|6|7|16|8|@$F|17|G|18|H|I]]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@$F|1A|G|1B|H|I]|$F|1C|G|1D|H|I]|$F|1E|G|1F|H|I]|$F|1G|G|1H|H|J]|$F|1I|G|1J|H|J]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1K|8|@$F|1L|G|1M|H|I]|$F|1N|G|1O|H|I]|$F|1P|G|1Q|H|I]|$F|1R|G|1S|H|I]|$F|1T|G|1U|H|J]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|T|$]]

<p>I faced the issue with ng2-file-upload for angular. if you are looking for the solution on angular by ng2-file-upload, refer below code</p>

<p><strong>HTML:</strong></p>

<p><code>&lt;input type="file" name="myfile"</code> <strong>#activeFrameinputFile</strong> <code>ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" /&gt;</code></p>

<p><strong>component</strong></p>

<p><code>import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';</code></p>

<p><code>@ViewChild('</code><strong>activeFrameinputFile</strong><code>')</code><strong>InputFrameVariable</strong><code>: ElementRef;</code></p>

<p><code>this.frameUploader.onSuccessItem = (item, response, status, headers) =&gt; {</code>
    <code>this.</code><strong>InputFrameVariable</strong><code>.nativeElement.value = '';</code>
   <code>};</code></p>


blocks|key|3327710|text|我知道它很旧，但在浏览器中测试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3327711|$0.value=null;+//+when+$0+is+the+file+upload+element+we+talking+about|code-block|syntax|javascript|3327712|删除了该值并允许我重新选择与以前相同的文件(这意味着它可以工作！)|3327713|在Chrome81，FF+76，Safari+(+iPad迷你)，360浏览器，百度浏览器，QQ浏览器，安卓浏览器上测试过。|3327714|解释：|3327715|根据我的观点，选定的文件可以大于1，最好不要将值设置为字符串-最终的值位于$0文件中，可能大于1。浏览器需要从"+value“解析选定的值，因此它是一个活动属性。根据我的理解，将其设置为null将导致浏览器将其解析为$0.files中的[]空列表(这就是发生的情况...)|3327716|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I know it is quite old, but testing in the browser:</p>

<pre><code>$0.value=null; // when $0 is the file upload element we talking about
</code></pre>

<p>erased the value and allow me to rechoose THE SAME FILE as before (means it worked!)</p>

<p>Tested in Chrome 81, FF 76, Safari (on iPad mini), 360 browser, Baidu browser, QQ browser, android browser. </p>

<h1>Explanation:</h1>

<p>As per my point of view that files selected can be more than 1, you'd better not set the value to a string - the final value sits in $0.files which may be more than 1. The browser need to parse the selected values from "value", so it is an active property. Set it to null, as per my understanding, will cause the browser to parse it to [] empty list in $0.files (this is what happened...)</p>


blocks|key|341210|text|这只是另一个用于pot的方法，但实际上您可以更改输入的类型。如果您将type设置为text，然后返回到file，则似乎会重置元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341211|var+myFileInput+=+document.getElementById('myfileinput');
myFileInput.type+=+"text";
myFileInput.type+=+"file";|code-block|syntax|javascript|341212|它会重置。在Google+Chrome、Opera、Edge、IE+11中测试|341213|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|$]]

<p>Just another one for the pot but you can actually change the type of an input.
If you set the type to text, then back to file, it seems to reset the element.</p>

<pre><code>var myFileInput = document.getElementById('myfileinput');
myFileInput.type = "text";
myFileInput.type = "file";
</code></pre>

<p>It resets.
Tested in Google Chrome, Opera, Edge, IE 11</p>


<p>I want to reset a file upload field when the user selects another option.</p>

<p>Is this possible via JavaScript? I'm suspecting that the file upload element is treated differently because it interacts with the user's file system, and maybe it's immutable.</p>

<p>Basically, what I want is something like (pseudo-code):</p>

<pre><code>// 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(''); 
}) ;
</code></pre>

<p>NB: <strong>This question and its answers span the period from 2009 to today.</strong> Browsers and approaches have changed in that time, please select your solutions with this in mind :)</p>


Clearing an HTML file upload field via JavaScript

文件系统

jQuery

当用户选择另一个选项时，我想重置文件上传域。这可以通过JavaScript实现吗？我怀疑文件上传元素的处理方式不同，因为它与用户的文件系统交互，而且可能是不可变的。基本上，我想要的是类似(伪代码)的东西：// Choose selecting existing file$('#select-file').bind('f...

问通过JavaScript清除HTML文件上传域
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过JavaScript清除HTML文件上传域EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过JavaScript清除HTML文件上传域
EN