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


549

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

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

Tapi itu tidak berhasil.

Jawaban:


529

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.


14
Pemenang! Bekerja di setiap browser dan menghindari bidang input kloning. Tetapi jika tombol-jelas berada di dalam formulir, silakan ganti nama reset()menjadi misalnya. reset2(), karena setidaknya di Chrome semua bidang dihapus jika ada reset(). Dan tambahkan event.preventDefault () setelah menghapus panggilan untuk mencegah pengiriman. Cara ini: <button onclick="reset2($('#file'));event.preventDefault()">Reset file</button>. Contoh kerja: jsfiddle.net/rPaZQ/23 .
Timo Kähkönen

28
Masalahnya, ini setidaknya untuk sementara membuat dokumen tidak valid. (Formulir tidak dapat berisi formulir lain.) Baik saat ini berfungsi atau tidak, bebas untuk memutuskan kapan saja ia mau.
cHao

6
@ cHao, tentu saja ini hanya benar jika elemen input sebenarnya dalam bentuk, yang tidak harus demikian.
Ninjakannon

7
Sehubungan dengan memiliki formulir di dalam formulir, Anda selalu bisa membuat elemen formulir baru di luar DOM, atau menambahkannya ke tubuh jika Anda mau, lalu memindahkan elemen input ke dalam formulir itu. Kemudian Anda akan mereset form baru itu, memindahkan elemen input kembali ke tempat itu, dan menghapus elemen form tambahan.
Kevin Heidt

4
Saya baru saja menemukan bahwa ini tidak berfungsi di IE 11. Kami menggunakan PixelFileInput - yang menggunakan pendekatan ini. Dan sementara teks dan thumbnail dihapus, daftar file objek tetap sama :(
Ian Grainger

434

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.


50
Anda juga dapat menggunakan metode .clone () di bidang $ ('# clone'). ReplaceWith ($ (this) .clone ());
metric152

4
Itu tidak melakukan apa-apa sama sekali - tidak ada kesalahan dalam pembakar. Saya harus menambahkan control.val (''); untuk menghapus kotak input file. Kode Anda bekerja di chrome dan IE9 apa adanya.
mnsr

10
Itu masih tidak berhasil. Itu harus dibersihkan sebelum penggantian. Jadi, Anda ingin .val () sebelum .replaceWith (). Jadi itu akan menjadi control.val (''). ReplaceWith (...);
mnsr

6
Saya punya solusi di bawah ini yang jauh lebih bersih dari ini: stackoverflow.com/a/13351234/909944
slipheed

2
jawaban ini ada di sini karena alasan historis. dukungan browser moderninput.value = null;
André Werlang

113

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.


Ini bekerja! (setidaknya vanilla JS sedikit di awal jawaban ini). Saya sudah menguji ini di Chrome, Firefox dan IE (11) terbaru.
PhilT

4
Saya akan menambahkan beberapa jawaban Anda yang sama, tetapi terutama itu .val(''). Bukankah itu lebih sederhana daripada mengkloning elemen unggahan atau menambahkan formulir bersarang? +1.
Erenor Paz

3
Solusi JQuery pertama (menggunakan .val("")) bekerja dengan sempurna, terima kasih. Jauh lebih sederhana daripada mengkloning input dan menggantinya juga.
Hugo Zink

51

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/


6
Tidak berfungsi dengan benar di IE. Nilai visual diatur ulang, tetapi nilai el. masih melaporkan versi sebelumnya. Ini membantu mengatur ulang el.value, tetapi hanya di IE10 +. jsfiddle.net/9uPh5/2
gregor

2
Solusi yang sama seperti di atas
PhilT

2
Itu salah, kita tidak bisa mengatur bidang ke nilai yang diberikan tetapi mudah-mudahan, kita bisa menghapusnya.
fralbo


20

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.


16

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

Pengguna lain telah menguji di Firefox juga.


2
Seperti banyak posting lain di sini jelaskan, ini tidak ramah lintas browser.
Tisch

Untuk pemahaman saya di mana browser gagal ini?
TheHamstring

1
Gagal di Internet Explorer sebagai file tipe input hanya dapat dibaca di IE>
Lucky

4
Bekerja di chrome dan firefox. Lebih dari cukup.
naimul64

12

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


3
ok tapi itu akan menghapus seluruh formulir .. bukan input file spesifik
Ashish Ratan

8

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.



tidak berfungsi di chrome 34 (linux). Metode replaceWith () bekerja di kedua browser (chrome, firefox)
Gaurav Sharma

Pada awalnya saya harus memperhatikan "$ .browser telah dihapus dari jquery 1.9" tetapi dua baris terakhir (Mengubah atribut tipe menjadi teks dan kemudian mengaturnya kembali ke file) berhasil. Selain itu saya mencoba mengatur $ ('# control'). Val (''); atau dalam dokumen javascript.getElementById (kontrol) .value = ''; dan bekerja juga dan tidak tahu mengapa kita tidak harus menggunakan pendekatan ini !? Akhirnya, saya memutuskan untuk menggunakan keduanya.
QMaster

8

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

Saya tidak mengerti mengapa jawaban ini tidak lebih dipilih?!
AlexB

1
@AlexB: Karena, seperti yang dijelaskan Timo, itu terlalu berat hanya untuk menghapus satu bidang input file.
TheCarver

Tidak tahu apakah itu berhasil tetapi tidak lebih pada FF 45.0.2 :(
fralbo

5

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


16
Saya bingung - saya mencoba $ ("# inputControl"). Val ("") dan itu memang mengosongkan isian. Apakah saya melewatkan sesuatu?
Sampson

1
@ Jonathan, bekerja untuk saya juga, tetapi jika Anda mengaturnya untuk hal lain itu adalah kesalahan keamanan. Diuji dalam FF4.
Brenden

reset () adalah metode asli JS jadi jika Anda memilih formulir melalui jQuery Anda harus mengambil elemen dari ruang lingkup jQuery. $ ("form # myForm") [0] .reset ();
Chris Stephens

4
@ Jonathan Ini berfungsi untuk Anda karena Anda tidak melakukannya di IE. Masalah keamanan ini adalah sesuatu yang hanya dihentikan oleh IE. Menghapus nilai secara teratur berfungsi di Chrome dan Firefox, tetapi tidak pada IE
VoidKing

5

Saya dapat menjalankan tugas saya dengan kode berikut:

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

5

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>


4

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

Apakah ini sudah diuji di semua browser utama?
Shawn

Tampaknya berfungsi baik di versi terbaru Chrome / FF / Opera, dan di IE8. Saya tidak dapat melihat alasan mengapa itu tidak bekerja pada apa pun - opsi reset pada formulir sudah ada sejak lama.
SpoonNZ

4

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!


Ini hampir berhasil. Satu hal yang perlu Anda lakukan agar Firefox berfungsi di sini adalah menggunakan .pop()array file alih-alih mengaturnya menjadi null. ini tampaknya menghapus file dengan benar.
kmacdonald

2

Di Firefox 40.0.3 saya hanya berfungsi dengan ini

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

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

2

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

1

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

0

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

1
Hai Niraj. Selamat datang. Jawaban ini mungkin benar tetapi bisa menggunakan beberapa penjelasan.
Tomfanning

0

Ini berfungsi dengan Chrome, FF, dan Safari

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

Mungkin tidak bekerja dengan IE atau Opera


1
Terlihat hampir identik dengan masalah yang ada di OP
Trindaz

1
bukan standar ecmascript, nilai file tipe input adalah properti perlindungan karena alasan keamanan.
e-info128

0

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>

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

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

0

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>

0

Cara mudah adalah mengubah tipe input dan mengubahnya kembali.

Sesuatu seperti ini:

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

-1

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

-4

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/


Saya tidak peduli tentang opera. Bungkus saja dalam bentuk lalu jika Anda peduli. Saya pribadi tidak peduli dan saya akan menggunakan metode saya.
Anonim

2
Ini bukan jawaban yang baik sama sekali tetapi masalah utama adalah sikap yang benar-benar buruk
Sam P

-5

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.