วิธีรีเซ็ต <input type =“ file”>

ฉันกำลังพัฒนาแอพ metro ด้วย VS2012 และ Javascript

ฉันต้องการรีเซ็ตเนื้อหาของอินพุตไฟล์ของฉัน:

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

ฉันควรทำอย่างไร

วิธีการแก้ปัญหา jQuery ที่ @ dhaval-marthak โพสต์ในความคิดเห็นเห็นได้ชัดว่าทำงานได้ แต่ถ้าคุณดูการโทร 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)

หากคุณเพิ่มผู้ฟังเหตุการณ์ 'เปลี่ยน' ในอินพุตนั้นจากนั้นในโค้ดจาวาสคริปต์ที่คุณสามารถโทรได้

event.target.value = '';

ตัวอย่างเช่นใน HTML:

<input type="file" onChange="onChangeFunction(event)">

และในจาวาสคริปต์:

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 บริสุทธิ์ !

มีวิธีไม่กี่อย่างที่ต้องทำ แต่วิธีที่ตรงไปตรงมาซึ่งทำงานได้ดีในเบราว์เซอร์จำนวนมากคือการเปลี่ยนค่าที่เก็บไว้เป็นอะไรวิธีการอัปโหลดที่ยื่นได้รับการรีเซ็ตและลองใช้จาวาสคริปต์บริสุทธิ์ รหัสด้านล่างเพียงตรวจสอบ (ES6):

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

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

โดยเฉพาะอย่างยิ่งสำหรับเชิงมุม

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

จะใช้งานได้ แต่ถ้าคุณใช้ Angular มันจะบอกว่า "คุณสมบัติ 'ค่า' ไม่มีอยู่ในประเภท 'HTMLElement'.any"

document.getElementById () ส่งคืนชนิด 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

ตัวอย่างนี้ใช้ได้

ตัวเลือกตัวอย่างเช่น$('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"/>

มีวิธีการมากมายและฉันจะแนะนำให้ไปกับสิ่งที่แนบมาอ้างอิงกับอินพุต

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

เพื่อล้างค่าหลังจากส่ง

this.fileInput.value = "";

เพียงใช้:

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

ด้วยเชิงมุมคุณสามารถสร้างตัวแปรแม่แบบและตั้งค่าเป็น 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

คุณไม่สามารถรีเซ็ตได้เนื่องจากเป็นไฟล์แบบอ่านอย่างเดียว คุณสามารถโคลนมันเพื่อแก้ไขปัญหา

คุณควรลองสิ่งนี้:

$("#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));

ใช้งานได้สำหรับการควบคุมแบบไดนามิกเช่นกัน

จาวาสคริ

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

});