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元素）

如果你添加了＆＃39;更改＆＃39;在该输入上的事件监听器，然后在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();

样本

请参阅this jsFiddle以获取代码和演示。

LINKS

有关详细信息，请参阅How to reset file input with JavaScript。

Answer 8

使用纯JavaScript ！

重置文件上传按钮非常简单

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 9

我用于vuejs

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

this.$refs.fileref.value = ''

Answer 10

重置输入文件非常单一

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

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

此示例适用

选择器例如是$('input[type=text]')或

形式的任何元素

活动 click，change或任何活动

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

Answer 11

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

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

我重置它：

  file_input.files=new DataTransfer().files

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

Answer 12

使用 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 13

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

Answer 14

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

Answer 15

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

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

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

    });
});

Answer 16

尤其对于Angular

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

会工作，但是如果您使用Angular 它将显示“属性'value'在类型'HTMLElement'.any上不存在”

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

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

Answer 17

只需使用：

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

Answer 18

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

Answer 19

你应该试试这个：

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

Answer 20

这可以像这样

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>

Answer 21

我遇到了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 = '';`

};

Answer 22

jQuery解决方案：

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

Answer 23

有很多方法，我建议输入引用附件。

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

提交后清除价值。

this.fileInput.value = "";

Answer 24

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

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

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

Answer 25

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>

Answer 26

我的最佳解决方案

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

Answer 27

也适用于动态控件。

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

});

Answer 28

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

如何重置<input type =“file”/>

28 个答案:

解

样本

LINKS