Bagaimana untuk Menetapkan Nilai Input Fail Secara Pengaturcaraan dengan Seret dan Lepas?

Bagaimanakah untuk Menetapkan Nilai Input Fail Apabila Menggugurkan Fail di Halaman?

Dalam percubaan untuk mencipta kawalan di mana pengguna boleh memilih kedua-duanya secara manual dan lepaskan fail untuk menyerahkan borang, anda telah menghadapi masalah: input fail kekal kosong apabila fail digugurkan. Walaupun kebimbangan keselamatan sebelum ini tidak dibenarkan menetapkan nilai input fail secara pemrograman, penyemak imbas moden telah menangani kelemahan ini.

Penyelesaian: Gunakan Pemindahan Data atau Senarai Fail

Anda kini boleh menetapkan nilai input fail pada pelayar moden dengan menggunakan objek dataTransfer atau FileList. Sejak Disember 2017, Firefox dan penyemak imbas utama lain membenarkan manipulasi input fail terprogram.

Kaedah:

1. Halang kelakuan acara lalai pada acara dragover dan dragleave untuk mendayakan fail interaksi input.

2. Pada drop acara:

   • Tetapkan fileInput.files sama dengan fail yang digugurkan yang diperoleh daripada e.dataTransfer.files. Ini memberikan fail yang dijatuhkan ke halaman kepada input fail.
3. Alih keluar isyarat visual yang menunjukkan pengguna sedang menyeret.

Contoh:

let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');

target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  body.classList.remove('dragging');

  fileInput.files = e.dataTransfer.files;
});

Nota: Kaedah ini berfungsi pada penyemak imbas moden dan menyediakan cara selamat untuk mengendalikan input fail dengan fungsi drag-and-drop.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Nilai Input Fail Secara Pengaturcaraan dengan Seret dan Lepas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!