HTML Filepicker Multi - Get-Dateien in Gebrauch

12

Das folgende Problem trat bei Verwendung von Firefox v73 unter Windows 7 auf:

In meinem Code verwende ich einen Multi-File-Picker in HTML, um bis zu 100 Dateien parallel hochzuladen:

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

Die Dateien werden an eine REST-API gesendet, die sie anschließend verarbeitet. Wenn ich eine einzelne Datei (im Datei-Explorer) auswähle, die gerade verwendet wird, erhalte ich eine Fehlermeldung (wahrscheinlich per Fenster), die mir mitteilt, dass die Datei nicht ausgewählt werden kann, weil sie verwendet wird. Wenn ich versuche, mehrere Dateien auszuwählen, die eine oder mehrere verwendete Dateien enthalten, tritt kein Fehler auf, aber der Upload scheint anzuhalten, wenn die verwendete Datei erreicht ist und auf die Freigabe der Datei wartet. Dies führt zu der Aufforderung, auf eine Zeitüberschreitung zu warten (in meinem Fall 1 Minute).

Gibt es eine Option, um das Problem (in der verwendeten Datei) zu beheben, bevor Sie versuchen, die Dateien hochzuladen?

PS: Ich habe dasselbe in Chrome versucht und es wird ein Fehler zurückgegeben, bevor die Anforderung an die REST-API gesendet wird.

Kevin H.
quelle
Können Sie Ihren Ajax-Anruf zeigen?
Islam Elshobokshy

Antworten:

3

Das klingt nach einem Betriebssystemproblem.
Etwas blockiert den Zugriff auf Ihre Datei und dies erfordert eine Korrektur auf Ihrer Seite.

Ich bezweifle, dass dies ein häufiges Problem sein wird, und es ist ziemlich schwierig, eine Lösung zu erstellen, ohne dass das gleiche Problem auftritt. Sie können jedoch versuchen, Ihre Dateien zu lesen, bevor Sie sie senden. Dies kann sehr bequem mit einer Blob.prototype.arrayBufferMethode durchgeführt werden, die polygefüllt werden kann.

Um viele E / A-Vorgänge zu vermeiden, können Sie dank der Blob.prototype.slice() Methode sogar versuchen, nur einen kleinen Teil davon zu lesen .

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
quelle
Danke Kaiido für die Lösung. Es gibt Ihren +50 Ruf. Lebensretter!
Kevin H.
0

Um mehrere Dateien auszuwählen, warum Sie https://github.com/blueimp/jQuery-File-Upload nicht verwenden

RavinduKD
quelle
Die Verwendung von jQuery ist für mich derzeit aufgrund technischer Einschränkungen auf Kundenseite keine Option.
Kevin H.