Pembuat file multi-get file HTML digunakan

12

Masalah berikut terjadi menggunakan Firefox v73 pada Window 7:

Dalam kode saya, saya menggunakan multi-file-picker dalam html untuk mengunggah hingga 100-file parallal:

<input type="file" id="files" name="files" multiple>

File akan dikirim ke REST-API yang memprosesnya sesudahnya. Ketika saya memilih satu file (dalam file-explorer) yang sedang digunakan, saya mendapatkan pesan kesalahan (mungkin melalui jendela) yang memberitahu saya, bahwa file tidak dapat dipilih karena sedang digunakan. Jika saya mencoba untuk memilih beberapa file yang berisi satu atau lebih file yang digunakan, saya tidak memiliki kesalahan tetapi pengunggahan tampaknya berhenti ketika file yang sedang digunakan tercapai dan menunggu file akan dirilis. Ini mengarah ke permintaan untuk menunggu batas waktu (yaitu 1 menit dalam kasus saya).

Apakah ada opsi untuk menangkap masalah (file yang digunakan) sebelum mencoba mengunggah file?

PS: Saya sudah mencoba yang sama di Chrome dan itu mengembalikan kesalahan sebelum mengirim permintaan ke REST-API.

Kevin H.
sumber
Bisakah Anda menunjukkan panggilan ajax Anda?
Islam Elshobokshy

Jawaban:

3

Itu terdengar seperti masalah OS.
Ada sesuatu yang mengunci file Anda agar tidak diakses dan ini membutuhkan perbaikan di sisi Anda.

Saya ragu itu akan menjadi masalah umum, dan cukup sulit untuk membangun solusi tanpa dapat mengalami masalah yang sama tetapi satu hal yang dapat Anda coba adalah membaca File Anda sebelum mengirimnya. Ini dapat dilakukan dengan cukup mudah dengan Blob.prototype.arrayBuffermetode, yang dapat diisi dengan polif.

Untuk menghindari banyak I / O, Anda bahkan dapat mencoba membaca hanya sebagian kecil darinya, berkat Blob.prototype.slice() metode.

const input = document.getElementById('inp');
const btn = document.getElementById('btn');

btn.onclick = async(evt) => {
  testAllFilesAvailability(input.files)
    .then(() => console.log('all good'))
    .catch(() => console.log('some are unavailable'));
}

function testAllFilesAvailability(files) {
  return Promise.all(
    [...files].map(file =>
      file.slice(0, Math.min(file.size, 4)) // don't load the whole file
      .arrayBuffer() // Blob.prototype.arrayBuffer may require a polyfill
    )
  );
}
<pre>
1. Select some files from the input
2. Change one of this files name on your hard-drive or even delete it
3. Press the button
</pre>

<input type="file" multiple id="inp">
<button id="btn">Test Availability</button>

Kaiido
sumber
Terima kasih Kaiido untuk solusinya. Ada reputasi +50 Anda. Penyelamat!
Kevin H.
0

Untuk memilih beberapa file mengapa Anda tidak menggunakan https://github.com/blueimp/jQuery-File-Upload

RavinduKD
sumber
Menggunakan jQuery saat ini bukan pilihan bagi saya karena keterbatasan teknis di sisi pelanggan.
Kevin H.