我正在使用 VS2012 和 Javascript 开发 Metro 应用程序
我想重置我的文件输入内容：
<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
我该怎么做？
【问题讨论】：
inputElement.value = "" 就可以很好地解决问题，而无需按照建议进行克隆或包装。适用于 CH(46)、IE(11) 和 FF(41)
标签： javascript visual-studio-2012 winjs
@dhaval-marthak 在 cmets 中发布的 jQuery 解决方案显然有效，但如果您查看实际的 jQuery 调用，很容易看出 jQuery 在做什么，只需将 value 属性设置为空字符串。因此，在“纯”JavaScript 中，它将是：
document.getElementById("uploadCaptureInputFile").value = "";
【讨论】：
$(#myfileselector).trigger('fileselect', [1, ""]);
你可以克隆它并用它自己替换它，所有事件仍然附加：
<input type="file" id="control">
和
var input = $("#control");
function something_happens() {
input.replaceWith(input.val('').clone(true));
};
感谢：Css-tricks.com
【讨论】：
value 似乎比操作 DOM 更简单。
您无法重置它，因为它是一个只读文件。您可以克隆它以解决问题。
【讨论】：
您需要将<input type = “file”> 包装到<form> 标签中，然后您可以通过重置表单来重置输入：
onClick="this.form.reset()"
【讨论】：
$("form").get(0).reset();。 .get(0) 将返回实际的表单元素，以便您可以使用 reset() 函数。
以下代码适用于我的 jQuery。它适用于所有浏览器，并允许保留事件和自定义属性。
var $el = $('#uploadCaptureInputFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
有关代码和演示，请参阅this jsFiddle。
【讨论】：
<input type="file">。
如果您有以下情况：
<input type="file" id="fileControl">
那就做吧：
$("#fileControl").val('');
重置文件控制。
【讨论】：
inputFileEl.value = '';
这是最好的解决方案：
input.value = ''
if(!/safari/i.test(navigator.userAgent)){
input.type = ''
input.type = 'file'
}
在所有答案中，这是最快的解决方案。没有输入克隆，没有表单重置！
我在所有浏览器中都检查过（它甚至支持 IE8）。
【讨论】：
input.type吗？仅将值设置为 '' 会产生预期的结果。
required，重置该字段应该使该字段再次无效。不幸的是，在这种情况下，它仍然有效，因此表单将提交，尽管没有任何值。
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"/>
【讨论】：
只需使用：
$('input[type=file]').val('');
【讨论】：
如果您的表单中有多个文件，但只想重置其中一个：
如果使用boostrap、jquery、filestyle来显示输入文件形式：
$("#"+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';
});
【讨论】：
on change 事件被触发时，该值被清除。输入的类型从无重置为文件。
重置输入文件非常单一
$('input[type=file]').val(null);
如果您绑定重置文件以更改表单的其他字段，或使用 ajax 加载表单。
此示例适用
选择器 例如是$('input[type=text]') 或表单的任何元素
事件 click、change 或任何事件
$('body').delegate('event', 'selector', function(){
$('input[type=file]').val(null) ;
});
【讨论】：
另一种解决方案（不选择 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.');
}
【讨论】：
. 的文件名。
使用 纯 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>
【讨论】：
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 的问题。如果您正在寻找角度解决方案，请参阅下面的代码
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 = '';`
};
【讨论】：
可以这样做
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>【讨论】：
尤其是 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()。
即使我还没有读过它。最好关注专家的博客
【讨论】：
有很多方法，我建议使用 ref 附件来输入。
<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 与我封装的文件输入元素进行交互。
【讨论】：