HTML filepicker multi - kullanımdaki dosyaları al


12

Pencere 7'de Firefox v73 kullanılarak aşağıdaki sorun oluştu:

Kodumda 100 dosyaya kadar parallal yüklemek için html'de çoklu dosya seçici kullanıyorum:

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

Dosyalar daha sonra bunları işleyen bir REST-API'ye gönderilir. Şu anda kullanımda olan tek bir dosya (dosya gezgini) seçtiğimde, bana kullanımda olduğu için dosyanın seçilemediğini söyleyen bir hata mesajı (muhtemelen pencere ile) alıyorum. Kullanımda bir veya daha fazla dosya içeren birden çok dosya seçmeye çalışırsam, hiçbir hata oluşmaz, ancak kullanımdaki dosyaya ulaşıldığında ve dosyanın serbest bırakılmasını beklerken yükleme durur gibi görünüyor. Bu, zaman aşımı (benim durumumda 1 dakika) için bekleme isteğine yol açar.

Dosyaları yüklemeye çalışmadan önce sorunu (kullanımda dosya) yakalama seçeneği var mı?

Not: Aynısını Chrome'da denedim ve isteği REST-API'ye göndermeden önce bir hata döndürüyor.


Ajax çağrınızı gösterebilir misiniz?
Islam Elshobokshy

Yanıtlar:


3

Bu bir işletim sistemi sorunu gibi geliyor.
Bir şey dosyanızın erişilmesini engelliyor ve bunun sizin tarafınızdan düzeltilmesi gerekiyor.

Bunun yaygın bir sorun olacağından şüpheliyim ve aynı sorunu yaşamadan bir çözüm oluşturmak oldukça zordur, ancak deneyebileceğiniz bir şey Dosyalarınızı göndermeden önce okumaktır . Bu, Blob.prototype.arrayBufferpoli-doldurulabilen yöntem ile oldukça uygun bir şekilde yapılabilir .

Çok fazla G / Ç'den kaçınmak için, Blob.prototype.slice() yöntem sayesinde sadece küçük bir bölümünü okumaya bile çalışabilirsiniz .

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>


Çözüm için teşekkürler Kaiido. +50 itibarınız var. Cankurtaran!
Kevin H.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.