Menghapus <input type = 'file' /> menggunakan jQuery

Apakah mungkin untuk menghapus <input type='file' />nilai kontrol dengan jQuery? Saya sudah mencoba yang berikut ini:

$('#control').attr({ value: '' }); 

Tapi itu tidak berhasil.

Mudah: Anda membungkus <form>elemen, mengatur ulang panggilan pada formulir, lalu menghapus formulir menggunakan .unwrap(). Tidak seperti .clone()solusi yang ada di utas ini, Anda berakhir dengan elemen yang sama di bagian akhir (termasuk properti khusus yang disetel di atasnya).

Diuji dan bekerja di Opera, Firefox, Safari, Chrome dan IE6 +. Juga berfungsi pada tipe elemen elemen lainnya, dengan pengecualian type="hidden".

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

Seperti yang dicatat Timo di bawah ini, jika Anda memiliki tombol untuk memicu pengaturan ulang bidang di dalam <form>, Anda harus memanggil .preventDefault()acara tersebut untuk mencegahnya <button>memicu pengiriman.

EDIT

Tidak berfungsi di IE 11 karena bug yang tidak diperbaiki. Teks (nama file) dihapus pada input, tetapi Filedaftarnya tetap terisi.

Jawaban cepat: ganti saja.

Dalam kode di bawah ini saya menggunakan replaceWithmetode jQuery untuk mengganti kontrol dengan tiruannya sendiri. Jika Anda memiliki penangan yang terikat pada acara di kontrol ini, kami juga ingin mempertahankannya. Untuk melakukan ini, kita masuk truesebagai parameter pertama dari clonemetode ini.

<input type="file" id="control"/>
<button id="clear">Clear</button>

var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

Fiddle: http://jsfiddle.net/jonathansampson/dAQVM/

Jika kloning, sambil mempertahankan penangan acara, menyajikan masalah yang dapat Anda pertimbangkan menggunakan delegasi acara untuk menangani klik pada kontrol ini dari elemen induk:

$("form").on("focus", "#control", doStuff);

Ini mencegah perlunya penangan dikloning bersama dengan elemen ketika kontrol sedang di-refresh.

Jquery seharusnya menangani masalah lintas-browser / browser lama untuk Anda.

Ini berfungsi pada browser modern yang saya uji: Chromium v25, Firefox v20, Opera v12.14

Menggunakan jquery 1.9.1

HTML

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

Jquery

$("#clear").click(function () {
    $("#fileopen").val("");
});

Di jsfiddle

Solusi javascript berikut juga bekerja untuk saya di browser yang disebutkan di atas.

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

Di jsfiddle

Saya tidak punya cara untuk menguji dengan IE, tetapi secara teoritis ini harus bekerja. Jika IE cukup berbeda sehingga versi Javascript tidak berfungsi karena MS telah melakukannya dengan cara yang berbeda, metode jquery menurut pendapat saya harus menanganinya untuk Anda, kalau tidak, akan lebih baik menunjukkannya kepada tim jquery bersama dengan metode yang dibutuhkan IE. (Saya melihat orang-orang mengatakan "ini tidak akan bekerja pada IE", tetapi tidak ada javascript vanilla untuk menunjukkan cara kerjanya pada IE (seharusnya "fitur keamanan"?), Mungkin melaporkannya sebagai bug ke MS juga (jika mereka mau hitung seperti itu), sehingga diperbaiki dalam rilis yang lebih baru)

Seperti disebutkan dalam jawaban lain, sebuah posting di forum jquery

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

Tetapi jquery sekarang telah menghapus dukungan untuk pengujian browser, jquery.browser.

Solusi javascript ini juga bekerja untuk saya, itu adalah setara vanilla dari metode jquery.replaceWith .

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Di jsfiddle

Yang penting untuk dicatat adalah bahwa metode cloneNode tidak mempertahankan penangan kejadian yang terkait.

Lihat contoh ini.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Di jsfiddle

Tapi jquery.clone menawarkan ini ^{[* 1]}

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Di jsfiddle

^{[* 1]} jquery dapat melakukan ini jika acara tersebut ditambahkan oleh metode jquery karena menyimpan salinan di jquery.data , itu tidak berfungsi sebaliknya, jadi ini sedikit curang / bekerja di sekitar dan berarti semuanya tidak kompatibel antara berbagai metode atau pustaka.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Di jsfiddle

Anda tidak bisa mendapatkan event handler terlampir langsung dari elemen itu sendiri.

Berikut adalah prinsip umum dalam javascript vanilla, ini adalah bagaimana jquery semua pustaka lain melakukannya (secara kasar).

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

Di jsfiddle

Tentu saja jquery dan perpustakaan lain memiliki semua metode pendukung lain yang diperlukan untuk mempertahankan daftar seperti itu, ini hanyalah sebuah demonstrasi.

Untuk alasan keamanan yang jelas Anda tidak dapat mengatur nilai input file, bahkan ke string kosong.

Yang harus Anda lakukan adalah mereset formulir di mana bidang atau jika Anda hanya ingin mengatur ulang input file dari formulir yang berisi bidang lain, gunakan ini:

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

Berikut ini contohnya: http://jsfiddle.net/v2SZJ/1/

Ini bekerja untuk saya.

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

Semoga ini bisa membantu.

Di IE8 mereka membuat bidang Unggah File hanya-baca untuk keamanan. Lihat posting blog tim IE :

Secara historis, Kontrol Unggah Berkas HTML () telah menjadi sumber sejumlah besar kerentanan pengungkapan informasi. Untuk mengatasi masalah ini, dua perubahan dilakukan pada perilaku kontrol.

Untuk memblokir serangan yang bergantung pada “mencuri” penekanan tombol untuk secara diam-diam menipu pengguna agar mengetikkan path file lokal ke dalam kontrol, kotak edit Path File sekarang hanya-baca. Pengguna harus secara eksplisit memilih file untuk diunggah menggunakan dialog File Browse.

Selain itu, "Sertakan jalur direktori lokal saat mengunggah file" URLAction telah diatur ke "Nonaktifkan" untuk Zona Internet. Perubahan ini mencegah kebocoran informasi sistem file lokal yang berpotensi sensitif ke Internet. Misalnya, alih-alih mengirimkan path lengkap C: \ users \ ericlaw \ document \ secret.tool.png, Internet Explorer 8 sekarang hanya akan mengirimkan nama file image.png.

$("#control").val('')itu yang kamu butuhkan! Diuji pada Chrome menggunakan JQuery 1.11

Pengguna lain telah menguji di Firefox juga.

Saya terjebak dengan semua opsi di sini. Inilah hack yang saya buat yang berfungsi:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

dan Anda dapat memicu reset menggunakan jQuery dengan kode yang mirip dengan ini:

$('#file_reset').trigger('click');

(jsfiddle: http://jsfiddle.net/eCbd6/ )

Saya berakhir dengan ini:

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

mungkin bukan solusi yang paling elegan, tetapi ini bekerja sejauh yang saya tahu.

Saya telah menggunakan https://github.com/malsup/form/blob/master/jquery.form.js , yang memiliki fungsi bernama clearInputs()crossbrowser, teruji dengan baik, mudah digunakan dan juga menangani masalah IE dan pembersihan bidang tersembunyi. jika diperlukan. Mungkin solusi yang agak panjang untuk hanya menghapus input file, tetapi jika Anda berurusan dengan unggahan file crossbrowser, maka solusi ini disarankan.

Penggunaannya mudah:

// Hapus semua bidang file:
$ ("input: file"). clearInputs ();

// Hapus juga bidang tersembunyi:
$ ("input: file"). clearInputs (true);

// Hapus bidang tertentu:
$ ("# myfilefield1, # ​​myfilefield2"). clearInputs ();

/ **
 * Menghapus elemen formulir yang dipilih.
 * /
$ .fn.clearFields = $ .fn.clearInputs = fungsi (termasukHidden) {
    var re = / ^ (?: warna | tanggal | datetime | email | bulan | nomor | kata sandi | rentang | pencarian | tel | teks | waktu | url | minggu) $ / i; // 'tersembunyi' tidak ada dalam daftar ini
    kembalikan this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        kalau tidak (t == 'kotak centang' || t == 'radio') {
            this.checked = false;
        }
        kalau tidak (tag == 'select') {
            this.selectedIndex = -1;
        }
        lain jika (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (ini) .replaceWith ($ (this) .clone (true));
            } lain {
                $ (ini) .val ('');
            }
        }
        lain jika (termasuk disembunyikan) {
            // includeHidden bisa menjadi nilai true, atau bisa juga berupa string pemilih
            // menunjukkan tes khusus; sebagai contoh:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // yang di atas akan membersihkan input tersembunyi yang memiliki kelas 'khusus'
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (ini) .is (includeHidden)))
                this.value = '';
        }
    });
};

Nilai input file hanya dibaca (untuk alasan keamanan). Anda tidak dapat mengosongkannya secara terprogram (selain dengan memanggil metode reset () dari formulir, yang memiliki cakupan lebih luas dari hanya bidang itu).

Saya dapat menjalankan tugas saya dengan kode berikut:

var input = $("#control");    
input.replaceWith(input.val('').clone(true));

Saya telah mencari cara sederhana dan bersih untuk menghapus input file HTML, jawaban di atas sangat bagus, tetapi tidak ada yang benar-benar menjawab apa yang saya cari, sampai saya menemukan di web dengan sederhana cara elegan untuk melakukannya:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

semua kredit untuk Chris Coyier .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

The .clone()hal tidak tidak bekerja di Opera (dan mungkin orang lain). Itu membuat konten.

Metode terdekat di sini bagi saya adalah Jonathan sebelumnya, namun memastikan bahwa bidang itu mempertahankan nama, kelas, dll dibuat untuk kode berantakan dalam kasus saya.

Sesuatu seperti ini mungkin bekerja dengan baik (terima kasih kepada Quentin juga):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

Saya telah berhasil membuat ini berfungsi menggunakan yang berikut ...

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

Ini telah diuji di IE10, FF, Chrome & Opera.

Ada dua peringatan ...

1. Masih tidak berfungsi dengan benar di FF, jika Anda me-refresh halaman, elemen file akan diisi ulang dengan file yang dipilih. Darimana informasi ini didapat berada di luar jangkauan saya. Apa lagi yang terkait dengan elemen input file yang bisa saya coba hapus?

2. Ingatlah untuk menggunakan delegasi pada peristiwa apa pun yang Anda lampirkan ke elemen input file, sehingga mereka masih berfungsi ketika klon dibuat.

Apa yang saya tidak mengerti adalah siapa di dunia yang berpikir tidak memungkinkan Anda untuk menghapus bidang input dari pilihan file yang tidak dapat diterima adalah ide yang baik?

OK, jangan biarkan saya mengaturnya secara dinamis dengan nilai sehingga saya tidak bisa membasahi file dari OS pengguna, tetapi biarkan saya menghapus pilihan yang tidak valid tanpa mengatur ulang seluruh formulir.

Ini tidak seperti 'menerima' melakukan apa pun selain filter dan di IE10, ia bahkan tidak mengerti tipe mime MS Word, ini hanya lelucon!

Di Firefox 40.0.3 saya hanya berfungsi dengan ini

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

ini berfungsi untuk saya di setiap browser.

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

Saya mencoba dengan sebagian besar teknik yang disebutkan oleh pengguna, tetapi tidak ada yang bekerja di semua browser. yaitu: clone () tidak berfungsi di FF untuk input file. Saya akhirnya menyalin secara manual input file, dan kemudian mengganti yang asli dengan yang disalin. Ini bekerja di semua browser.

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>");
$fileInput.replaceWith($fileCopy);

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

Ini berfungsi dengan Chrome, FF, dan Safari

$("#control").val("")

Mungkin tidak bekerja dengan IE atau Opera

Jadikan tidak sinkron, dan setel ulang setelah tindakan yang diinginkan tombol selesai.

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}

itu tidak bekerja untuk saya:

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

jadi di asp mvc saya menggunakan fitur silet untuk mengganti input file. pada awalnya buat variabel untuk string input dengan Id dan Nama dan kemudian gunakan itu untuk ditampilkan di halaman dan ganti pada tombol reset klik:

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

Cara mudah adalah mengubah tipe input dan mengubahnya kembali.

Sesuatu seperti ini:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

Anda bisa menggantinya dengan klonnya seperti itu

var clone = $('#control').clone();

$('#control').replacewith(clone);

Tapi ini klon dengan nilainya juga jadi kamu lebih baik seperti itu

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

Mudah lol (berfungsi di semua browser [kecuali opera]):

$('input[type=file]').each(function(){
    $(this).after($(this).clone(true)).remove();
});

JS Fiddle: http://jsfiddle.net/cw84x/1/

Apa? Dalam fungsi validasi Anda, cukup cantumkan

document.onlyform.upload.value="";

Diasumsikan mengunggah adalah namanya:

<input type="file" name="upload" id="csv_doc"/>

Saya menggunakan JSP, tidak yakin apakah itu membuat perbedaan ...

Bekerja untuk saya, dan saya pikir itu jauh lebih mudah.