Bagaimana saya bisa menghapus input file HTML dengan JavaScript?

Saya ingin menghapus input file dalam formulir saya.

Saya tahu tentang pengaturan sumber ke metode yang sama ... Tapi metode itu tidak akan menghapus jalur file yang dipilih.

Catatan : Saya ingin menghindari memuat ulang halaman, mengatur ulang formulir atau melakukan panggilan AJAX.

Apakah ini mungkin?

Bagaimana dengan menghapus simpul itu, membuat simpul baru dengan nama yang sama?

Ada 3 cara untuk menghapus input file dengan javascript:

1. atur nilai properti menjadi kosong atau nol.

   Berfungsi untuk IE11 + dan browser modern lainnya.

2. Buat elemen input file baru dan ganti yang lama.

   Kerugiannya adalah Anda akan kehilangan pendengar acara dan properti ekspansi.

3. Setel ulang formulir pemilik melalui metode form.reset ().

   Untuk menghindari memengaruhi elemen input lain dalam formulir pemilik yang sama, kami dapat membuat formulir kosong baru dan menambahkan elemen input file ke formulir baru ini dan mengatur ulangnya. Cara ini berfungsi untuk semua browser.

Saya menulis fungsi javascript. demo: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl; dr : Untuk peramban modern, cukup gunakan

input.value = '';

Jawaban lama:

Bagaimana tentang:

input.type = "text";
input.type = "file";

Saya masih harus mengerti mengapa ini tidak bekerja dengan webkit .

Bagaimanapun, ini bekerja dengan IE9>, Firefox dan Opera.
Situasi dengan webkit adalah saya sepertinya tidak dapat mengubahnya kembali ke file.
Dengan IE8, situasinya melempar pengecualian keamanan.

Sunting: Untuk webkit, Opera dan firefox ini berfungsi, meskipun:

input.value = '';

(periksa jawaban di atas dengan proposal ini)

Saya akan melihat apakah saya dapat menemukan cara bersih yang lebih baik untuk melakukan cross-browser ini tanpa memerlukan GC.

Sunting2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

Bekerja dengan sebagian besar browser. Tidak bekerja dengan IE <9, itu saja.
Diuji pada firefox 20, chrome 24, opera 12, IE7, IE8, IE9, dan IE10.

Mengatur nilai agar ''tidak berfungsi di semua browser.

Alih-alih mencoba mengatur nilai agar nullsuka:

document.getElementById('your_input_id').value= null;

EDIT: Saya mendapatkan alasan keamanan yang sangat valid untuk tidak mengizinkan JS untuk mengatur input file, namun tampaknya masuk akal untuk menyediakan mekanisme sederhana untuk membersihkan sudah memilih output. Saya mencoba menggunakan string kosong tetapi tidak berfungsi di semua browser, NULLberfungsi di semua browser yang saya coba (Opera, Chrome, FF, IE11 + dan Safari).

Sunting: Harap dicatat bahwa pengaturan untuk NULLbekerja pada semua browser sementara pengaturan ke string kosong tidak.

Sayangnya tidak ada jawaban di atas yang muncul untuk mencakup semua basis - setidaknya tidak dengan pengujian saya dengan javascript vanilla.

• .value = nulltampaknya berfungsi pada FireFox, Chome, Opera dan IE11 (tetapi tidak IE8 / 9/10)

• .cloneNode(dan .clone()di jQuery) di FireFox tampaknya menyalin .value, sehingga membuat klon itu sia-sia.

Jadi di sini adalah fungsi javascript vanilla yang saya tulis yang berfungsi pada FireFox (27 dan 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... ini adalah satu-satunya browser yang saat ini tersedia bagi saya untuk menguji.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

The ctrlparameter input file itu sendiri, sehingga fungsi akan disebut sebagai ...

clearFileInput(document.getElementById("myFileInput"));

LARUTAN

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

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

Lihat jsFiddle ini untuk kode dan demonstrasi.

LINK

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

• Cara mengatur ulang input file dengan JavaScript

Anda perlu menggantinya dengan input file baru. Inilah cara melakukannya dengan jQuery:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

dan gunakan baris ini ketika Anda perlu menghapus kolom input (pada beberapa acara misalnya):

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

Sunting:
Yang ini tidak berfungsi di IE dan opera, tetapi tampaknya bekerja untuk firefox, safari dan chrome.

Saya mengalami masalah yang sama dan saya menemukan ini.

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

Itu sebenarnya cukup mudah.

document.querySelector('#input-field').value = '';

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 diberikan kepada 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>

Jawaban di atas menawarkan solusi yang agak canggung karena alasan berikut:

1. Saya tidak suka harus wrapyang inputpertama dan kemudian mendapatkan html, sangat terlibat dan kotor.

2. Cross browser JS sangat berguna dan tampaknya dalam hal ini ada terlalu banyak yang tidak diketahui untuk menggunakan typeswitching (yang, sekali lagi, agak kotor) dan mengatur valueke''

Jadi saya menawarkan solusi berbasis jQuery saya:

$('#myinput').replaceWith($('#myinput').clone())

Itu melakukan apa yang dikatakannya, itu menggantikan input dengan klon itu sendiri. Klon tidak akan memiliki file yang dipilih.

Keuntungan:

1. Kode sederhana dan mudah dimengerti
2. Tidak ada pembungkus canggung atau beralih jenis
3. Kompatibilitas lintas browser (koreksi saya jika saya salah di sini)

Hasil: Selamat programmer

Berikut adalah dua sen saya, file input disimpan sebagai array jadi di sini adalah bagaimana cara membatalkannya

document.getElementById('selector').value = []

ini mengembalikan array kosong dan berfungsi di semua browser

Apa yang membantu saya adalah, saya mencoba mengambil dan mengunggah file yang dipilih terakhir menggunakan loop, daripada membersihkan antrian, dan itu berhasil. Ini kodenya.

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

Semoga ini bisa membantu.

Saya mencoba sebagian besar solusi tetapi tampaknya tidak ada yang berhasil. Namun saya menemukan jalan-jalan untuk itu di bawah ini.

Struktur formulir adalah: form=> label, inputdan submit button. Setelah kami memilih file, nama file akan ditampilkan oleh label dengan melakukannya secara manual di JavaScript.

Jadi strategi saya adalah: awalnya kiriman buttondinonaktifkan, setelah file dipilih, disabledatribut tombol kirim akan dihapus sehingga saya bisa mengirimkan file. Setelah saya kirim, saya menghapus labelyang membuatnya tampak seperti saya menghapus file inputtetapi sebenarnya tidak. Kemudian saya akan menonaktifkan tombol kirim lagi untuk mencegah mengirimkan formulir.

Dengan mengatur button disablepengiriman atau tidak, saya menghentikan file dari pengiriman berkali-kali kecuali saya memilih file lain.

Saya mengubah untuk mengetik teks dan kembali ke mengetik ke file menggunakan setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}

yang input.value = nullmerupakan metode kerja, namun hanya akan memicu masukan ini changeacara jika dipanggil dari onclickacara.

Solusi untuk itu adalah memanggil onchangehandler itu secara manual setiap kali Anda perlu mengatur ulang input.

function reset_input(input) {
    $(input)[0].value = null;
    input_change_handler();
}
function input_change_handler() {
    // this happens when there's been a change in file selection

    if ($(input)[0].files.length) {
        // file(s) selected
    } else {
        // nothing is selected
    }
}
$(input).on('change', input_change_handler);