如何重置<输入类型=“文件”>

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

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

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

我应该怎么做？

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

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

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

onClick="this.form.reset()"

这是最好的解决方案：

input.value = ''

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

在所有答案中，这是最快的解决方案。没有输入克隆，没有表格复位！

我在所有浏览器中都对其进行了检查（它甚至具有IE8支持）。

如果您有以下情况：

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

然后做：

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

重置文件控件。

您可以克隆它并替换为它，同时保留所有事件：

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

和

var input = $("#control");

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

谢谢：Css-tricks.com

另一个解决方案（不选择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.');
  }

解

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

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

演示

看到这个jsFiddle代码和演示，。

链接

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

使用纯JavaScript重置文件上传按钮非常容易！

这样做的方法很少，但是在许多浏览器中都能正常工作的必须直接的方法是将文件值更改为空，这样就重置了上传文件，还尝试使用纯JavaScript而不是任何框架，我创建了下面的代码，只需将其签出（ES6）：

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

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

特别是对于Angular

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

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

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

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

额外：-

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

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

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

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

我用于vuejs

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

this.$refs.fileref.value = ''

重置输入文件非常单一

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

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

这个例子适用

选择器，例如is $('input[type=text]')或以下形式的任何元素

事件 click，change或任何事件

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

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

有很多方法，我建议将ref附加到输入中。

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

提交后清除价值。

this.fileInput.value = "";

只需使用：

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

使用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演示

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

您应该尝试这样：

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

可以这样做

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>

我最好的解决方案

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

jQuery解决方案：

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

我面对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 = '';`

};

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

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

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

    });
});

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

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

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

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

也适用于动态控件。

Java脚本

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

});