如何重置 <input type = "file">

Posted 2023-02-22

【中文标题】如何重置 <input type = "file">

【英文标题】：how to reset <input type = "file">

【发布时间】：2013-12-31 04:52:17

【问题描述】：

我正在使用 VS2012 和 javascript 开发 Metro 应用程序

我想重置我的文件输入内容：

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />

我该怎么做？

【问题讨论】：

内容是什么意思？

你的意思是说，用户选择了一个文件后，你想把选择的文件重置为“无”吗？

***.com/questions/1043957/…的可能重复

它seems 一个简单的inputElement.value = "" 就可以很好地解决问题，而无需按照建议进行克隆或包装。适用于 CH(46)、IE(11) 和 FF(41)

How can I clear an html file input with JavaScript?的可能重复

【参考方案1】：

@dhaval-marthak 在 cmets 中发布的 jQuery 解决方案显然有效，但如果您查看实际的 jQuery 调用，很容易看出 jQuery 在做什么，只需将 value 属性设置为空字符串。因此，在“纯”JavaScript 中，它将是：

document.getElementById("uploadCaptureInputFile").value = "";

【讨论】：

谢谢！如果您已经有了 jquery 引用， $input.val("") 将照常工作。

@2ndGAB 嗯……我只有 45.0.1，所以我无法测试……还有其他人吗？

@2ndGAB 更正，我的 Firefox 刚刚更新到 46.0.1，这段代码仍然在那里工作。你能确认一下吗？

@jakerella 这对我来说很奇怪，设置输入文件选择器值会触发安全异常。我成功使用的唯一解决方案是$(#myfileselector).trigger('fileselect', [1, ""]);

input.type = ''; input.type = '文件'; //享受

【参考方案2】：

你可以克隆它并用它自己替换它，所有事件仍然附加：

<input type="file" id="control">

和

var input = $("#control");

function something_happens() 
    input.replaceWith(input.val('').clone(true));
;

感谢：Css-tricks.com

【讨论】：

不幸的是，这不会重置输入值，请参阅this jsFiddle。如需更好的解决方案，请参阅this answer。

@Gyrocode.com 如果图像在重置后第二次上传，则此 jsFiddle 不起作用。

@SarthakSinghal，很遗憾你写错了代码，你应该这样做jsfiddle.net/cL1LooLe

@RogerRussel：完全正确...我想知道为什么上层答案说它只能工作一次，这清楚地表明某种参考正在丢失。实际情况确实如此，因为最初创建的输入引用后来被新的输入元素替换。

只是在其他答案中重置value 似乎比操作 DOM 更简单。

【参考方案3】：

您无法重置它，因为它是一个只读文件。您可以克隆它以解决问题。

【参考方案4】：

您需要将<input type = “file”> 包装到<form> 标签中，然后您可以通过重置表单来重置输入：

onClick="this.form.reset()"

【讨论】：

这是正确的方法。它适用于所有浏览器，并且与浏览器为防止恶意脚本弄乱文件输入的 .value 而实施的任何保护措施不冲突。

有点酷，但不适合我，因为它还会重置此表单上的其他字段。

类似的 jQuery 解决方案可能是$("form").get(0).reset();。 .get(0) 将返回实际的表单元素，以便您可以使用 reset() 函数。

【参考方案5】：

解决方案

以下代码适用于我的 jQuery。它适用于所有浏览器，并允许保留事件和自定义属性。

var $el = $('#uploadCaptureInputFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

演示

有关代码和演示，请参阅this jsFiddle。

链接

更多信息请参见How to reset file input with JavaScript。

【讨论】：

@alessadro，不，只是具有特定 ID 的元素 <input type="file">。

谢谢澄清你的答案:) +1

这是我找到的最干净且最符合浏览器的解决方案 - 谢谢。

【参考方案6】：

如果您有以下情况：

<input type="file" id="fileControl">

那就做吧：

$("#fileControl").val('');

重置文件控制。

【讨论】：

最佳解决方案恕我直言。

或者使用DOM：inputFileEl.value = '';

在 javascript 源代码中使用“val”会导致一些安全问题吗？

@novonimo 不，因为它所做的只是设置输入的值。如果有人愿意，他们可以使用浏览器的 DevTools 来运行 JavaScript。

【参考方案7】：

这是最好的解决方案：

input.value = ''

if(!/safari/i.test(navigator.userAgent))
  input.type = ''
  input.type = 'file'

在所有答案中，这是最快的解决方案。没有输入克隆，没有表单重置！

我在所有浏览器中都检查过（它甚至支持 IE8）。

【讨论】：

还有什么特别的原因要重置input.type吗？仅将值设置为 '' 会产生预期的结果。

这需要更多点赞之类的，我花了太长时间才找到这个答案，这是我发现的唯一一个在 IE 上工作的答案。

input.value = '' 在 IE11 中向控制台抛出异常。但是，重置 input.type 在所有浏览器上都可以正常工作。

这个答案不够好。如果输入设置为required，重置该字段应该使该字段再次无效。不幸的是，在这种情况下，它仍然有效，因此表单将提交，尽管没有任何值。

我会将值设置为null，但基本相同。

【参考方案8】：

使用 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"/>

【参考方案9】：

只需使用：

$('input[type=file]').val('');

【参考方案10】：

如果您的表单中有多个文件，但只想重置其中一个：

如果使用boostrap、jquery、filestyle来显示输入文件形式：

$("#"+idInput).filestyle('clear');

【参考方案11】：

你应该试试这个：

$("#uploadCaptureInputFile").val('');

【参考方案12】：

var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));

【参考方案13】：

也适用于动态控件。

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 !!');
        
    );

);

【参考方案14】：

jQuery 解决方案：

    $('input').on('change',function()
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            );

【讨论】：

考虑填补这个答案来解释它是如何工作的。

@Bugs 猜这不言自明。当文件输入的on change 事件被触发时，该值被清除。输入的类型从无重置为文件。

@Jordy 是的，我知道它的作用 :) 我只是在想，如果有十几个其他答案，值得尝试让它脱颖而出。在我复习的时候出现了。他们实际上可以复制您的评论以补充更多信息。总是值得尝试解释为什么您认为代码可以解决 OPs 问题。

【参考方案15】：

重置输入文件非常单一

$('input[type=file]').val(null);

如果您绑定重置文件以更改表单的其他字段，或使用 ajax 加载表单。

此示例适用

选择器 例如是$('input[type=text]') 或表单的任何元素

事件 click、change 或任何事件

$('body').delegate('event', 'selector', function()
     $('input[type=file]').val(null) ;
);

【参考方案16】：

另一种解决方案（不选择 HTML DOM 元素）

如果您在该输入上添加了“更改”事件侦听器，那么您可以在 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.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') 
    alert('Good file extension!');
  
  else 
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  

【讨论】：

angular2 的另一种方式：***.com/questions/40165271/…

这仅适用于文件扩展名前仅包含一个 . 的文件名。

没错，我已经编辑了代码并提供了更通用的方法来获取文件扩展名。

【参考方案17】：

使用 纯 JavaScript 重置文件上传按钮非常简单！

有几种方法可以做到这一点，但在许多浏览器中运行良好的必须直截了当的方法是将文件值更改为空，这样上传文件就会被重置，也尝试使用纯 JavaScript 而不是任何框架，我创建了下面的代码，只需检查一下（ES6）：

function resetFile() 
  const file = document.querySelector('.file');
  file.value = '';

<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>

【讨论】：

jquery怎么办

@AnandChoudhary 这也适用于 jQuery，但您可以替换 const file = document.querySelector('.file'); with const file = $('.file');或者只是做 $('.file').val("");清空它

【参考方案18】：

document.getElementById("uploadCaptureInputFile").value = "";

【参考方案19】：

我用于 vuejs

   <input
          type="file"
          ref="fileref"
          @change="onChange"/>

this.$refs.fileref.value = ''

【讨论】：

谢谢你！我以为我永远找不到 vuejs 的解决方案 :D，你疯了我的一天！

工作就像一个魅力！谢谢

【参考方案20】：

使用 Angular，您可以创建模板变量并将值设置为 null

<input type="file" #fileUploader />
<button (click)="fileUploader.value = null">Reset from UI</button>

或者你可以创建一个方法来像这样重置

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

  resetFileUploader()  
    this.fileUploader.nativeElement.value = null;
  

模板

<input type="file"/>
<button (click)="resetFileUploader()">Reset from Component</button>

stackblitz demo

【参考方案21】：

function resetImageField() 
    var $el = $('#uploadCaptureInputFile');                                        
    $el.wrap('<form>').closest('form').get(0).reset();
    $el.unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<button onclick="resetImageField()">Reset field</button>

【参考方案22】：

我遇到了 ng2-file-upload 的问题。如果您正在寻找角度解决方案，请参阅下面的代码

HTML：

<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

组件

import Component, OnInit, ElementRef, ViewChild from '@angular/core';

@ViewChild('activeFrameinputFile')InputFrameVariable: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) =>

`this.`**InputFrameVariable**`.nativeElement.value = '';`

;

【参考方案23】：

可以这样做

var inputfile= $('#uploadCaptureInputFile')
$('#reset').on('click',function()
inputfile.replaceWith(inputfile.val('').clone(true));
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<a href="" id="reset">Reset</a>

【参考方案24】：

尤其是 Angular

document.getElementById('uploadFile').value = "";

可以，但是如果你使用 Angular 它会说“类型'HTMLElement'.any上不存在属性'值'”

document.getElementById() 返回不包含 value 属性的 HTMLElement 类型。因此，将其转换为 HTMLInputElement

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";

额外：-

但是，我们不应该在 Angular 中使用 DOM 操作（document.xyz()）。

为此，angular 提供了@VIewChild、@ViewChildren 等，它们分别是 document.querySelector()、document.queryselectorAll()。

即使我还没有读过它。最好关注专家的博客

通过这个link1，link2

【讨论】：

很高兴我不必使用 angular！

没有。 FIx 会在那里。只有我找到了这个。那你用的是哪个？

对不起，我在讽刺...我只是使用 document.getElementById('uploadFile').value = "";因为我不使用角度。

不错的一个。我也是这么想的，但是，使用 Angular/React/VUE。这些是用于路由、组件、服务、dom 操作覆盖实现的强大框架

【参考方案25】：

有很多方法，我建议使用 ref 附件来输入。

<input
    id="image"
    type="file"
    required
    ref=ref => this.fileInput = ref
    multiple
    onChange=this.onFileChangeHandler
/>

提交后清除值。

this.fileInput.value = "";

【参考方案26】：

我的最佳解决方案

$(".file_uplaod_input").val('');  // this is working best ):

【讨论】：

这与第一个答案和该答案的 cmets 有何不同？

【参考方案27】：

<input type="file" id="mfile" name="mfile">
<p>Reset</p>

<script>
$(document).ready(function()
$("p").click(function()

            $("#mfile").val('');
            return false;

    );
);

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案以添加解释并说明适用的限制和假设。 From Review

$("#mfile").val('') 将清空文件输入字段。

【参考方案28】：

我在这里想念另一个解决方案（2021 年）： 我使用FileList 与文件输入进行交互。

由于无法创建FileList 对象，我使用DataTransfer，它带来了干净的FilleList。

我重置它：

  file_input.files=new DataTransfer().files  

在我的情况下，这非常适合，因为我只通过 FileList 与我封装的文件输入元素进行交互。