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

小开

@dhaval-marthak在评论中发布的jQuery解决方案显然是有效的，但如果你看看实际的jQuery调用，就很容易看出jQuery在做什么，只是将value属性设置为空字符串。所以在“纯”JavaScript中，它将是:

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

小开

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

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

而且

var input = $("#control");


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

谢谢:csstricks.com

小开

你不能重置，因为它是一个只读文件。你可以克隆它来解决这个问题。

小开

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

onClick="this.form.reset()"

小开

解决方案

下面的代码是用jQuery编写的。它适用于所有浏览器，并允许保存事件和自定义属性。

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

演示

代码和演示参见这jsFiddle。

链接

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

小开

如果你有以下情况:

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

然后就这样做:

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

重置文件控件。

小开

这是最好的解决方案:

input.value = ''


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

在所有的答案中这是最快的解。没有输入克隆，没有窗体重置!

我在所有浏览器中都检查了它(它甚至支持IE8)。

小开

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

小开

只使用:

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

小开

如果你的表单中有几个文件，但只想重置其中一个:

如果你使用boostrap, jquery, filstyle来显示输入文件的形式:

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

小开

你应该试试这个:

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

小开

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

小开

也适用于动态控制。

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


});

小开

jQuery的解决方案:

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

小开

重置输入文件是非常单一的

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

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

本例适用

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

事件 click， change或任何事件

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

小开

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

小开

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

有几个方法可以做到这一点，但必须直接的方法，这是在许多浏览器工作良好的改变文件值为零，这样上传文件得到重置，也尝试使用纯javascript而不是任何框架，我创建了下面的代码，检查一下(ES6):

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

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

小开

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

小开

我用来做vuejs

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


this.$refs.fileref.value = ''

小开

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

小开

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>

小开

我在ng2-file-upload中遇到过angular的问题。如果你正在寻找angular的解决方案，请参考下面的代码

HTML:

__abc0 __abc2 __abc1

组件

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

@ViewChild('activeFrameinputFile')InputFrameVariable: ElementRef;

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

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

};

小开

可以这样做

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>

小开

特别是角

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

将工作，但如果你使用Angular 它会说"属性'value'不存在类型'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

小开

有许多方法，我将建议去参考附件输入。

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

在提交后清除值。

this.fileInput.value = "";

小开

我的最佳解决方案

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

小开

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


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


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


});
});

小开

我在这里错过了另一个解决方案(2021): 我使用FileList来与文件输入交互

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

我用:

  file_input.files=new DataTransfer().files

在我的例子中，这非常适合，因为我只通过FileList与封装的文件输入元素交互。