Bagaimanakah Saya Boleh Mengisi Nilai Fail Input Secara Automatik Menggunakan Seret dan Lepas?

Cara Mengisi Nilai Fail Input Secara Automatik Apabila Menyeret dan Menggugurkan Halaman

Latar Belakang:

Atas sebab keselamatan, sebelum ini tidak mungkin untuk menetapkan nilai fail input secara pemrograman menggunakan JavaScript. Walau bagaimanapun, dengan kemajuan dalam teknologi penyemak imbas, ini telah berubah.

Penyelesaian:

Langkah 1: Dayakan File Drop

Tambahkan pendengar acara seret dan lepas pada bekas yang dikehendaki:

const target = document.getElementById("container");

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

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

Langkah 2: Berikan Nilai Fail

Tangkap objek FileList daripada peristiwa Pemindahan data:

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

  const files = e.dataTransfer.files;
  document.getElementById("file-input").files = files;
});

Ganti "bekas" dengan ID elemen kontena yang anda ingin dayakan seret dan lepas hidup, dan "input-fail" dengan ID fail input elemen.

Nota:

Kaedah ini berfungsi pada penyemak imbas moden yang menyokong spesifikasi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengisi Nilai Fail Input Secara Automatik Menggunakan Seret dan Lepas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!