Bagaimana untuk Menetapkan Nilai Input Fail Secara Pengaturcaraan Selepas Seret-dan-Lepaskan?

Bagaimana untuk Menetapkan Nilai Input Fail Apabila Menggugurkan Fail pada Halaman?

Apabila mencipta kawalan input fail yang membenarkan kedua-dua pemilihan fail tradisional dan seret -and-drop, adalah penting untuk memastikan bahawa medan input fail mencerminkan fail yang digugurkan dengan betul. Walau bagaimanapun, menetapkan nilai input fail melalui JavaScript telah dihadkan pada masa lalu kerana kebimbangan keselamatan.

Penyelesaian

Syukurlah, penyemak imbas moden telah menangani kelemahan keselamatan ini, membenarkan kami untuk melaraskan sifat fail input[type="file"] secara pemrograman. Ini membolehkan kami mensimulasikan kesan menjatuhkan fail ke dalam medan input fail.

Butiran Pelaksanaan

1. Kendalikan Peristiwa Drag-and-Drop : Gunakan pendengar acara untuk memantau acara drag-over, drag-leave dan drop pada elemen sasaran yang diingini (cth., bekas yang mengelilingi medan input fail).
2. Cegah Tindakan Lalai: Halang gelagat seret dan lepas lalai untuk mengendalikannya secara tersuai.
3. Akses Pemindahan Data atau Senarai Fail : Untuk fail yang digugurkan, dapatkan objek dataTransfer atau FileList daripada objek e yang dihantar ke acara pengendali.
4. Tetapkan Medan Input Fail: Tetapkan sifat fail medan input fail sasaran kepada sama ada dataTransfer.files atau FileList yang diperoleh dalam langkah 3. Tindakan ini akan mengisi input fail dengan berkesan medan dengan fail yang digugurkan.

Contoh Kod

Berikut ialah coretan kod JavaScript yang menunjukkan cara menetapkan nilai input fail apabila fail dijatuhkan ke halaman:

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

// Configure drag and drop event listeners
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;
});

Dengan kod ini disediakan, anda akan dapat menetapkan nilai input fail, membenarkan interaksi lancar antara memilih fail melalui medan input fail atau terus menjatuhkannya ke kawasan yang ditetapkan.

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