cara mengatur ulang <input type = "file">

Saya mengembangkan aplikasi metro dengan VS2012 dan Javascript

Saya ingin mengatur ulang isi input file saya:

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

Bagaimana saya harus melakukan itu?

Solusi jQuery yang diposting @ dhaval-marthak di komentar jelas berfungsi, tetapi jika Anda melihat panggilan jQuery yang sebenarnya, cukup mudah untuk melihat apa yang dilakukan jQuery, cukup mengatur valueatribut ke string kosong. Jadi dalam JavaScript "murni" adalah:

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

Anda harus membungkus <input type = “file”>dengan <form>tag dan kemudian Anda dapat mengatur ulang input dengan mengatur ulang formulir Anda:

onClick="this.form.reset()"

Ini adalah solusi TERBAIK:

input.value = ''

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

Dari semua jawaban di sini, ini adalah solusi tercepat. Tidak ada klon input, tidak ada form reset!

Saya memeriksanya di semua browser (bahkan memiliki dukungan IE8).

Jika Anda memiliki yang berikut:

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

maka lakukan saja:

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

untuk mengatur ulang kontrol file.

Anda bisa mengkloning dan menggantinya dengan itu sendiri, dengan semua acara masih terlampir:

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

dan

var input = $("#control");

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

Terima kasih: Css-tricks.com

Solusi lain (tanpa memilih elemen HTML DOM)

Jika Anda menambahkan pendengar acara 'ubah' pada input itu, maka dalam kode javascript Anda dapat memanggil (untuk beberapa kondisi tertentu):

event.target.value = '';

Misalnya dalam HTML:

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

Dan dalam 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.');
  }

LARUTAN

Kode berikut ini berfungsi untuk saya dengan jQuery. Ia bekerja di setiap browser dan memungkinkan untuk melestarikan acara dan properti khusus.

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

DEMO

Lihat jsFiddle ini untuk kode dan demonstrasi.

LINK

Lihat Cara mengatur ulang input file dengan JavaScript untuk informasi lebih lanjut.

Menyetel ulang tombol unggah file sangat mudah menggunakan JavaScript murni !

Ada beberapa cara untuk melakukannya, tetapi cara langsung yang harus bekerja dengan baik di banyak browser adalah mengubah nilai yang diajukan menjadi tidak ada, sehingga cara unggah arsip diatur ulang, juga mencoba menggunakan javascript murni daripada kerangka apa pun, saya membuat kode di bawah ini, cukup periksa (ES6):

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

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

Khusus untuk Angular

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

Akan bekerja, Tetapi jika Anda menggunakan Angular Ini akan mengatakan "Nilai properti 'tidak ada pada tipe' HTMLElement'.any"

document.getElementById () mengembalikan tipe HTMLElement yang tidak mengandung properti nilai. Jadi, masukkan ke dalam HTMLInputElement

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

EKSTRA: -

Namun, kita tidak boleh menggunakan manipulasi DOM (document.xyz ()) dalam sudut.

Untuk melakukan itu, angular telah menyediakan @VIewChild, @ViewChildren, dll yang masing-masing adalah document.querySelector (), document.queryselectorAll ().

Bahkan saya belum membacanya. Lebih baik mengikuti blog para ahli

Melalui ini link1 , link2

Saya gunakan untuk vuejs

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

this.$refs.fileref.value = ''

File input reseting sangat tunggal

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

Jika Anda mengikat mengatur ulang file di ubah bidang lain dari formulir, atau muat formulir dengan ajax.

Contoh ini berlaku

pemilih misalnya adalah $('input[type=text]')atau elemen apa pun dari formulir

acara click ,, changeatau acara apa pun

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

Dengan IE 10 saya menyelesaikan masalah dengan:

    var file = document.getElementById("file-input");
    file.removeAttribute('value');
    file.parentNode.replaceChild(file.cloneNode(true),file);

dimana:

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>

Ada banyak pendekatan dan saya akan menyarankan untuk pergi dengan lampiran ref to input.

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

untuk menghapus nilai setelah mengirim.

this.fileInput.value = "";

Cukup gunakan:

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

Dengan angular Anda dapat membuat variabel templat dan mengatur nilainya null

<input type="file" #fileUploader />
<button (click)="fileUploader.value = null">Reset from UI</button>

Atau Anda dapat membuat metode untuk mengatur ulang seperti ini

komponen.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

  resetFileUploader() { 
    this.fileUploader.nativeElement.value = null;
  }

templat

<input type="file"/>
<button (click)="resetFileUploader()">Reset from Component</button>

demo stackblitz

Anda tidak dapat mengatur ulang itu karena ini adalah file hanya baca. Anda dapat mengkloningnya untuk menyelesaikan masalah.

Anda harus mencoba ini:

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

Ini bisa dilakukan seperti ini

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>

Solusi Terbaik Saya

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

solusi jQuery:

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

Saya menghadapi masalah dengan ng2-file-upload untuk sudut. jika Anda mencari solusi dalam kode sudut rujukan di bawah ini

HTML:

<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

komponen

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;

    });
});

Jika Anda memiliki beberapa file di formulir, tetapi hanya ingin salah satu di antaranya disetel ulang:

jika Anda menggunakan boostrap, jquery, filestyle untuk menampilkan formulir file input:

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

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

Juga berfungsi untuk kontrol dinamis.

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

});