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

Menetapkan Nilai Input Fail pada Gugur Halaman

Latar Belakang

Anda sedang mengusahakan kawalan yang membolehkan pemilihan dan penyerahan fail melalui menjatuhkan ke kawasan yang ditetapkan. Walau bagaimanapun, anda mendapati bahawa input fail kekal kosong sehingga borang diserahkan secara manual.

Penyelesaian: Menetapkan Objek Fail daripada JavaScript

Syukurlah, penyemak imbas moden kini membenarkan tetapan terprogram daripada fail input menggunakan sifat fail. Begini cara anda boleh melaksanakannya menggunakan pemindahan data:

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

target.addEventListener('drop', (e) => {
  e.preventDefault();
  fileInput.files = e.dataTransfer.files;
});

Kaedah Alternatif: FileList

Anda juga boleh menetapkan nilai input fail daripada objek FileList:

let fileInput = document.querySelector('input');

fileInput.files = [file1, file2, ...];

Penafian

Keupayaan untuk menetapkan nilai fail input bergantung pada pemindahan data atau objek FileList yang tersedia. Risiko keselamatan warisan yang dikaitkan dengan ciri ini telah ditangani dalam penyemak imbas moden.

Contoh

Tunjuk cara boleh didapati dalam coretan kod yang disediakan di bawah:

biar fileInput = document.querySelector('input');</p><p>target.addEventListener('drop', (e) => {<br> e.preventDefault();<br> fileInput.files = e.dataTransfer.files;<br>});

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!