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

Question

我正在使用VS2012和Javascript开发一个metro应用程序

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

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

我该怎么办？

Answer 1

@ dhaval-marthak在评论中发布的jQuery解决方案显然有效,但如果你看看实际的jQuery调用,很容易看到jQuery正在做什么,只需将value属性设置为空字符串即可.所以在"纯粹的"JavaScript中它将是:

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

Answer 2

您需要包装<input type = “file”>到<form>标签,然后您可以通过重置您的表单重置输入:

onClick="this.form.reset()"

Answer 3

这是最佳解决方案:

input.value = ''

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

在这里的所有答案中,这是最快的解决方案.没有输入克隆,没有表单重置!

我在所有浏览器中检查过它(它甚至支持IE8).

Answer 4

您可以克隆它并将其替换为自身,所有事件仍然附加:

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

和

var input = $("#control");

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

谢谢:Css-tricks.com

Answer 5

如果您有以下内容:

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

然后就是:

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

重置文件控件.

Answer 6

另一种解决方案(不选择HTML DOM元素)

如果您在该输入上添加了'change'事件侦听器,那么在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.');
  }

Answer 7

解

以下代码适用于jQuery.它适用于每个浏览器,并允许保留事件和自定义属性.

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

DEMO

有关代码和演示,请参阅此jsFiddle.

链接

有关更多信息,请参见如何使用JavaScript重置文件输入.

Answer 8

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

有几种方法可以做到这一点,但在许多浏览器中运行良好的必须直接的方法是将字段值更改为空,这样上传字段被重置,也尝试使用纯javascript而不是任何框架,我创建了下面的代码,只需检查出来(ES6):

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

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

Answer 9

我用于vuejs

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

this.$refs.fileref.value = ''

Answer 10

特别是对于Angular

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

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

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

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

额外：-

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

为此，角度提供了@ VIewChild，@ ViewChildren等，它们分别是document.querySelector（）和document.queryselectorAll（）。

甚至我都没看过。更好地跟随专家的博客

通过这次访问链接1，链接2

Answer 11

重置输入文件非常单一

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

如果绑定重置文件,请更改表单的其他字段,或使用ajax加载表单.

此示例适用

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

事件 click,change或任何事件

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

Answer 12

我想念这里的另一个解决方案 (2021)：我FileList用来与文件输入进行交互。

由于无法创建FileList对象，因此我使用DataTransfer, 这会带来干净的 FilleList 。

我用以下方法重置它：

  file_input.files=new DataTransfer().files  

就我而言，这非常适合，因为我仅通过FileList与封装的文件输入元素进行交互。

Answer 13

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

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

提交后清除值。

this.fileInput.value = "";

Answer 14

我最好的解决方案

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

Answer 15

只需使用：

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

Answer 16

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

Answer 17

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

Answer 18

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

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

或者您可以创建一个像这样重置的方法

组件.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

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

模板

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

堆栈闪电战演示

Answer 19

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

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

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

    });
});