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

2020/09/28 03:21 · javascript ·  · 0评论

我正在使用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]')或以下形式的任何元素

事件 clickchange或任何事件

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

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

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

提交后清除价值。

this.fileInput.value = "";

使用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"/>
document.getElementById("uploadCaptureInputFile").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演示

我最好的解决方案

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

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

您应该尝试这样:

$("#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>
<input type="file" id="mfile" name="mfile">
<p>Reset</p>

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

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

    });
});

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

};

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

如果使用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 !!');
        }
    });

});
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>
本文地址:http://javascript.askforanswer.com/ruhezhongzhi.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!