cara mengatur ulang <input type = "file">

401

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?

Yesus
sumber
1
Apa yang Anda maksud dengan konten?
Maess
3
maksud Anda, setelah pengguna memilih file, Anda ingin mengatur ulang file yang dipilih menjadi "tidak ada"?
ddavison
9
Kemungkinan duplikat stackoverflow.com/questions/1043957/…
Dhaval Marthak
14
itu tampaknya yang sederhana inputElement.value = ""melakukan trik baik-baik saja tanpa menggunakan kloning atau pembungkus seperti yang disarankan. Bekerja di CH (46), IE (11) dan FF (41)
Robert Koritnik

Jawaban:

372

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 = "";
Jordan Kasper
sumber
15
Terima kasih! Jika Anda sudah memiliki referensi jquery, $ input.val ("") akan berfungsi seperti biasa.
Natan
@ 2ndGAB Hmm ... Saya hanya punya 45.0.1 jadi saya tidak bisa menguji ... orang lain?
Jordan Kasper
@ Koreksi 2ndGAB, Firefox Saya baru saja diperbarui ke 46.0.1 dan kode ini masih berfungsi di sana. Bisakah kamu mengkonfirmasi?
Jordan Kasper
@ jakerella itu aneh, bagi saya, menetapkan nilai pemilih file input memicu pengecualian Keamanan. Satu-satunya solusi yang berhasil saya gunakan adalah$(#myfileselector).trigger('fileselect', [1, ""]);
fralbo
3
input.type = ''; input.type = 'file'; // nikmati
Maxmaxmaximus
81

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()"
levkaster
sumber
7
Ini adalah metode yang benar. Ini bekerja di semua browser dan tidak bertentangan dengan perlindungan yang diterapkan browser untuk mencegah skrip jahat dari main-main dengan nilai input file.
Eugene Ryabtsev
9
Agak keren, bukan untuk saya, karena itu juga me-reset bidang lain pada formulir ini.
Starwave
2
Solusi jQuery serupa bisa jadi $("form").get(0).reset();. The .get(0)akan kembali elemen bentuk yang sebenarnya, sehingga Anda dapat menggunakan reset()fungsi.
teewuane
74

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).

Maxmaxmaximus
sumber
4
Apakah ada alasan khusus untuk mengatur ulang input.typejuga? Pengaturan nilai untuk ''memberikan hasil yang diharapkan.
Harshita Sethi
Apakah ini memunculkan onchangeevent di MS Edge?
hotohoto
@hotohoto saya tidak tahu, punya mac os)
Maxmaxmaximus
1
Ini perlu beberapa upvotes atau sesuatu, saya butuh waktu terlalu lama untuk menemukan jawaban ini, ini adalah satu-satunya yang saya temukan yang berfungsi pada IE.
sch
input.value = '' melempar pengecualian ke konsol di IE11. Namun mengatur ulang input.type berfungsi pada semua browser tanpa kesalahan.
Miroslav Jasso
45

Jika Anda memiliki yang berikut:

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

maka lakukan saja:

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

untuk mengatur ulang kontrol file.

sstauross
sumber
6
IMHO solusi terbaik.
Serhii Maksymchuk
3
Atau gunakan DOM:inputFileEl.value = '';
Ninh Pham
44

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

pixparker
sumber
1
Sayangnya ini tidak mengatur ulang nilai input, lihat jsFiddle ini . Untuk solusi yang lebih baik, lihat jawaban ini .
Gyrocode.com
1
@ Gyrocode.com jsFiddle ini tidak berfungsi jika gambar diunggah untuk kedua kalinya setelah reset.
Sarthak Singhal
2
@SarthakSinghal, Sayangnya Anda menulis kode yang salah, Anda seharusnya melakukan jsfiddle.net/cL1LooLe
Roger Russel
2
@RogerRussel: Tepat ... Saya bertanya-tanya sendiri bagaimana jawaban atas mengatakan bahwa itu hanya berfungsi sekali yang merupakan indikator yang jelas bahwa semacam referensi sedang hilang. Dan itu sebenarnya terjadi karena awalnya membuat referensi input yang kemudian diganti dengan elemen input baru.
Robert Koritnik
1
Menyetel ulang yang valueserupa pada jawaban lain tampaknya jauh lebih mudah daripada memanipulasi DOM.
CodeFinity
40

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.');
  }
indreed
sumber
Cara lain untuk angular2: stackoverflow.com/questions/40165271/…
Belter
Ini hanya akan berfungsi pada nama file yang hanya berisi satu .di depan ekstensi file.
Ma Kobi
Itu benar, saya telah mengedit kode dan memberikan pendekatan yang lebih universal untuk mendapatkan ekstensi file.
indreed
31

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.

Gyrocode.com
sumber
1
@alessadro, tidak, hanya elemen <input type="file">dengan ID tertentu.
Gyrocode.com
Terima kasih, jelaskan jawaban Anda :) +1
candjack
1
Ini adalah solusi paling bersih dan paling sesuai dengan browser yang saya temukan - terima kasih.
Pat
25

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>

Alireza
sumber
bagaimana hubungannya dengan jquery
Anand Choudhary
1
@AnandChoudhary ini berfungsi di dalam jQuery juga, tetapi Anda dapat mengganti file const = document.querySelector ('. File'); dengan file const = $ ('. file'); atau cukup lakukan $ ('. file'). val (""); untuk mengosongkannya
Alireza
18

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

P Satish Patro
sumber
senang saya tidak harus menggunakan sudut!
user2677034
Tidak. FIx akan ada di sana. Hanya saya yang menemukan ini. Yang mana yang Anda gunakan?
P Satish Patro
Maaf, saya menjadi sarkastik ... Saya hanya menggunakan document.getElementById ('uploadFile'). Value = ""; karena saya tidak menggunakan sudut.
user2677034
Bagus Saya pikir hal yang sama, Tapi, gunakan Angular / React / VUe. Ini adalah kerangka kerja yang kuat untuk perutean, komponen, layanan, dominasi manipulasi penindasan
P Satish Patro
14

Saya gunakan untuk vuejs

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

this.$refs.fileref.value = ''
anson
sumber
2
Terima kasih sobat! Saya pikir saya tidak akan pernah menemukan solusi dengan vuejs: D, Anda gila hari saya!
Zsoca
1
Bekerja seperti pesona! Terima kasih
F KIng
8

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) ;
});
Ivan Fretes
sumber
5

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"/>
Alvaro Joao
sumber
5

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

Jalaleddin Hosseini
sumber
5

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 = "";
Sourabh Bhutani
sumber
4

Cukup gunakan:

$('input[type=file]').val('');
deepak shinde
sumber
4

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

malbarmavi
sumber
2

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

Ducaz035
sumber
2

Anda harus mencoba ini:

$("#uploadCaptureInputFile").val('');
Muhammad Awais
sumber
2

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>

Fraz Abbas
sumber
2

Solusi Terbaik Saya

$(".file_uplaod_input").val('');  // this is working best ):
Abdelhakim Ezzahraoui
sumber
Apa bedanya dengan jawaban pertama dan komentar pada jawaban itu?
Akin Okegbile
1

solusi jQuery:

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            });
panatoni
sumber
Pertimbangkan untuk menambahkan jawaban ini untuk menjelaskan cara kerjanya.
Bug
@Bugs kira ini berbicara sendiri. Ketika acara input file on changedipicu nilai akan dihapus. Jenis input akan dipindahkan dari nol ke file.
2
@Jordy ya saya tahu apa fungsinya :) Saya hanya berpikir bahwa dengan selusin jawaban lain akan ada baiknya mencoba membuatnya menonjol. Itu muncul ketika saya sedang meninjau. Mereka sebenarnya bisa menyalin komentar Anda untuk menambahkannya sedikit lebih banyak. Selalu ada baiknya mencoba menjelaskan mengapa Anda merasa kode memperbaiki masalah OPs.
Bug
1

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

};

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

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

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

    });
});

w.Daya
sumber
Sementara kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan tentang bagaimana dan mengapa ini menyelesaikan masalah akan sangat membantu untuk meningkatkan kualitas posting Anda, dan mungkin menghasilkan lebih banyak suara. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, bukan hanya orang yang bertanya sekarang. Harap edit jawaban Anda untuk menambahkan penjelasan dan berikan indikasi tentang batasan dan asumsi apa yang berlaku. Dari Ulasan
double-beep
0

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');
pengguna6087223
sumber
0
var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));
Kld
sumber
0

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

});
Arun Prasad ES
sumber
0

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>

Md. Abu Bakker Siddique
sumber