HTML filepicker मल्टी - उपयोग में फ़ाइलें प्राप्त करें

12

विंडो 7 पर फ़ायरफ़ॉक्स v73 का उपयोग करके निम्नलिखित समस्या उत्पन्न हुई:

मेरे कोड में मैं 100-फाइल पराल को अपलोड करने के लिए html में एक बहु-फाइल-पिकर का उपयोग करता हूं:

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

फाइलें एक REST-API को भेजी जाएंगी जो उन्हें बाद में संसाधित करती हैं। जब मैं एक फ़ाइल (फ़ाइल-एक्सप्लोरर में) का चयन करता हूं जो वर्तमान में उपयोग में है, तो मुझे एक त्रुटि-संदेश (शायद खिड़की से) मिलता है जो मुझे बताता है, कि फ़ाइल को उठाया नहीं जा सकता क्योंकि यह उपयोग में है। यदि मैं कई-फ़ाइलों को चुनने की कोशिश करता हूं, जिसमें एक या अधिक फाइलें शामिल हैं, तो मुझे कोई त्रुटि नहीं हुई है, लेकिन फ़ाइल-इन-उपयोग तक पहुंचने पर अपलोड बंद हो जाती है और फ़ाइल के रिलीज़ होने की प्रतीक्षा कर रहा है। इससे टाइमआउट की प्रतीक्षा करने का अनुरोध होता है (जो मेरे मामले में 1 मिनट है)।

क्या फ़ाइलों को अपलोड करने का प्रयास करने से पहले समस्या (उपयोग फ़ाइल में) को पकड़ने का कोई विकल्प है?

पुनश्च: मैंने क्रोम में ऐसा ही प्रयास किया है और REST-API को अनुरोध भेजने से पहले यह एक त्रुटि देता है।

— केविन एच।
स्रोत

क्या आप अपना अजाक्स कॉल दिखा सकते हैं?

— इस्लाम एलशोबोक्शी

3

यह एक OS मुद्दे की तरह लगता है।
कुछ आपकी फ़ाइल को एक्सेस होने से लॉक कर रहा है और इसके लिए आपकी ओर से फ़िक्स की आवश्यकता है।

मुझे संदेह है कि यह एक सामान्य मुद्दा होगा, और एक ही मुद्दे का अनुभव किए बिना एक समाधान का निर्माण करना काफी कठिन है, लेकिन एक चीज जिसे आप कोशिश कर सकते हैं वह है कि आप उन्हें भेजने से पहले अपनी फ़ाइलों को पढ़ें । यह Blob.prototype.arrayBufferविधि के साथ काफी आसानी से किया जा सकता है , जिसे पॉलीफ़िल किया जा सकता है।

बहुत से I / O से बचने के लिए, आप इसका केवल एक छोटा सा हिस्सा पढ़ने की कोशिश कर सकते हैं, Blob.prototype.slice() विधि के लिए धन्यवाद ।

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
स्रोत

समाधान के लिए धन्यवाद काइदो। आपकी +50 की प्रतिष्ठा है। Lifesaver!

— केविन एच।

0

कई फ़ाइलों का चयन करने के लिए आप https://github.com/blueimp/jQuery-File-Upload का उपयोग क्यों नहीं करते हैं

— RavinduKD
स्रोत

ग्राहक पक्ष में तकनीकी सीमाओं के कारण वर्तमान में jQuery का उपयोग करना मेरे लिए कोई विकल्प नहीं है।

— केविन एच।