उपयोगकर्ता के डिवाइस पर फ़ाइलों को चुनना और उनके साथ इंटरैक्ट करना, इनमें से एक है वेब की सबसे ज़्यादा इस्तेमाल की जाने वाली सुविधाओं के बारे में बात करते हैं. इससे उपयोगकर्ता, फ़ाइलें चुन सकते हैं और उन्हें सर्वर पर अपलोड करें. उदाहरण के लिए, फ़ोटो शेयर करते समय या टैक्स सबमिट करते समय दस्तावेज़. यह साइटों को बिना किसी गड़बड़ी के उन्हें पढ़ने और उनमें बदलाव करने की अनुमति भी देता है का इस्तेमाल करें. इस पेज पर बताया गया है कि फ़ाइलों के साथ इंटरैक्ट करने के लिए JavaScript.
मॉडर्न फ़ाइल सिस्टम ऐक्सेस एपीआई
File System Access API, फ़ाइलों को पढ़ने और उनमें लिखने का तरीका उपलब्ध कराती है. उपयोगकर्ता के स्थानीय सिस्टम पर मौजूद डायरेक्ट्री में. यह सुविधा, Chromium का इस्तेमाल करने वाले ज़्यादातर लोगों के लिए उपलब्ध है जैसे कि Chrome और Edge ब्राउज़र. इसके बारे में ज़्यादा जानने के लिए, यह पढ़ें File System Access API.
फ़ाइल सिस्टम ऐक्सेस एपीआई सभी ब्राउज़र पर काम नहीं करता है. इसलिए, हम browser-fs-access का इस्तेमाल करने का सुझाव देते हैं, एक हेल्पर लाइब्रेरी जो नए एपीआई को इस्तेमाल करती है, चाहे वह जहां भी उपलब्ध हो और मौजूद हो लेगसी वाले तरीकों का इस्तेमाल करें.
फ़ाइलों पर काम करें, यह क्लासिक तरीका है
इस गाइड में, JavaScript के पुराने तरीकों का इस्तेमाल करके फ़ाइलों से इंटरैक्ट करने का तरीका बताया गया है.
फ़ाइलें चुनें
फ़ाइलें चुनने के दो मुख्य तरीके हैं: एचटीएमएल इनपुट एलिमेंट में जाकर, खींचें और छोड़ें.
एचटीएमएल इनपुट एलिमेंट
उपयोगकर्ताओं के लिए फ़ाइलें चुनने का सबसे आसान तरीका
<input type="file">
एलिमेंट, जो हर प्रमुख ब्राउज़र में समर्थित है. जब इस बटन पर क्लिक किया जाता है, तो उपयोगकर्ता
एक फ़ाइल या कई फ़ाइलों का चयन करता है अगर
multiple
विशेषता को शामिल किया जाता है, जिसमें उनके ऑपरेटिंग सिस्टम में पहले से मौजूद फ़ाइल चयन का इस्तेमाल किया जाता है
यूज़र इंटरफ़ेस (यूआई). जब उपयोगकर्ता किसी फ़ाइल या फ़ाइलों को चुन लेता है, तो एलिमेंट का change
इवेंट सक्रिय करता है. आप event.target.files से फ़ाइलों की सूची ऐक्सेस कर सकते हैं, जिसमें
एक FileList ऑब्जेक्ट है.
FileList का हर आइटम एक File ऑब्जेक्ट है.
<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
const fileSelector = document.getElementById('file-selector');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
</script>
यहां दिए गए उदाहरण में, किसी उपयोगकर्ता को अपने ऑपरेटिंग सिस्टम का इस्तेमाल करके कई फ़ाइलें चुनने की सुविधा दी गई है का बिल्ट-इन फ़ाइल चुनने वाला यूज़र इंटरफ़ेस (यूआई) मिलता है और फिर चुनी गई हर फ़ाइल को कंसोल.
उन फ़ाइलों को सीमित करें जिन्हें उपयोगकर्ता चुन सकते हैं
कुछ मामलों में, हो सकता है कि आप उपयोगकर्ताओं के चुने गए फ़ाइलों के टाइप को सीमित करना चाहें. इसके लिए
उदाहरण के लिए, इमेज में बदलाव करने वाले किसी ऐप्लिकेशन को सिर्फ़ इमेज स्वीकार करनी चाहिए, टेक्स्ट फ़ाइलों को नहीं. सेट करने के लिए
फ़ाइल टाइप पर पाबंदियां लगाने के लिए,
accept
एट्रिब्यूट की वैल्यू डालें, ताकि यह तय किया जा सके कि कौनसे फ़ाइल टाइप स्वीकार किए जाते हैं:
<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">
पसंद के मुताबिक खींचें और छोड़ें
कुछ ब्राउज़र में, <input type="file"> एलिमेंट भी ड्रॉप टारगेट होता है,
इससे उपयोगकर्ता आपके ऐप्लिकेशन में फ़ाइलों को खींचकर, छोड़ सकते हैं. हालांकि, गिरावट का यह लक्ष्य
छोटा है और इसे इस्तेमाल करना मुश्किल हो सकता है. इसके बजाय, पहले, शब्दों का इस्तेमाल करके बनाई गई मुख्य सुविधाएं
एक <input type="file"> एलिमेंट हो, तो आपके पास बड़ा साइज़ और
अपनी ज़रूरत के हिसाब से 'खींचें और छोड़ें' सुविधा उपलब्ध होनी चाहिए
की जगह है.
ड्रॉप ज़ोन चुनें
ऐप्लिकेशन के लॉन्च की जगह, आपके ऐप्लिकेशन के डिज़ाइन के हिसाब से तय होती है. ऐसा हो सकता है कि आपको सिर्फ़ क्लिक की जा सकती है, लेकिन आप पूरी विंडो का इस्तेमाल कर सकते हैं.
इमेज कंप्रेस करने की सुविधा देने वाले ऐप्लिकेशन, Squoosh इस्तेमाल करने से उपयोगकर्ता किसी इमेज को
विंडो और <input type="file"> शुरू करने के लिए, कोई इमेज चुनें पर क्लिक करें
एलिमेंट. ड्रॉप ज़ोन के तौर पर कोई भी विकल्प चुनें, लेकिन पक्का करें कि वह उपयोगकर्ता को साफ़ तौर पर पता हो
ताकि वे उस सरफ़ेस पर फ़ाइलें खींचकर रख सकें.
ड्रॉप ज़ोन तय करें
किसी एलिमेंट को खींचें और छोड़ें ज़ोन के तौर पर चालू करने के लिए, लिसनर बनाएं
दो इवेंट: dragover
और drop.
dragover इवेंट, ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) को अपडेट करके दिखाता है कि
'खींचें और छोड़ें' कार्रवाई का मतलब है कि फ़ाइल की कॉपी बन रही है. drop इवेंट ट्रिगर हुआ
जब उपयोगकर्ता फ़ाइलों को स्क्रीन पर छोड़ देता है. इनपुट एलिमेंट की तरह ही, आपको
event.dataTransfer.files से फ़ाइलों की सूची को ऐक्सेस कर सकता है, जो
FileList ऑब्जेक्ट. हर
FileList का आइटम एक File ऑब्जेक्ट है.
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', (event) => {
event.stopPropagation();
event.preventDefault();
// Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = 'copy';
});
dropArea.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
const fileList = event.dataTransfer.files;
console.log(fileList);
});
event.stopPropagation()
और event.preventDefault()
ब्राउज़र के डिफ़ॉल्ट व्यवहार को रोकें और इसके बजाय अपने कोड को चलने दें. उनके बिना,
ऐसा न होने पर, ब्राउज़र आपके पेज से किसी दूसरी जगह पर जाएगा और उन फ़ाइलों को खोलेगा
उपयोगकर्ता ब्राउज़र विंडो पर गया.
लाइव डेमोंस्ट्रेशन के लिए, अपने हिसाब से खींचें और छोड़ें पेज पर जाएं.
डायरेक्ट्री क्या हैं?
माफ़ करें, JavaScript का इस्तेमाल करके डायरेक्ट्री ऐक्सेस करने का कोई अच्छा तरीका नहीं है.
webkitdirectory
<input type="file"> एलिमेंट में मौजूद एट्रिब्यूट से उपयोगकर्ता डायरेक्ट्री चुन सकता है
या डायरेक्ट्री. यह ज़्यादातर बड़े ब्राउज़र में काम करता है
हालाँकि, Android के लिए Firefox और iOS पर Safari का इस्तेमाल नहीं किया जा सकता.
अगर खींचें और छोड़ें सुविधा चालू है, तो उपयोगकर्ता किसी डायरेक्ट्री को
ड्रॉप ज़ोन. ड्रॉप इवेंट सक्रिय होने पर, इसमेंFile
निर्देशिका है, लेकिन निर्देशिका में किसी भी फ़ाइल तक पहुंच उपलब्ध नहीं कराती.
फ़ाइल का मेटाडेटा पढ़ें
File ऑब्जेक्ट में फ़ाइल के बारे में मेटाडेटा होता है. ज़्यादातर ब्राउज़र
कृपया इसके आधार पर फ़ाइल का नाम, फ़ाइल का आकार, और MIME टाइप दें.
तो अलग-अलग ब्राउज़र अलग-अलग या अतिरिक्त
जानकारी.
function getMetadataForFileList(fileList) {
for (const file of fileList) {
// Not supported in Safari for iOS.
const name = file.name ? file.name : 'NOT SUPPORTED';
// Not supported in Firefox for Android or Opera for Android.
const type = file.type ? file.type : 'NOT SUPPORTED';
// Unknown cross-browser support.
const size = file.size ? file.size : 'NOT SUPPORTED';
console.log({file, name, type, size});
}
}
input-type-file में जाकर, यह देखा जा सकता है
डेमो.
किसी फ़ाइल का कॉन्टेंट पढ़ना
FileReader का इस्तेमाल करके
मेमोरी में File ऑब्जेक्ट का कॉन्टेंट पढ़ें. आप FileReader को ये काम करने के लिए कह सकते हैं
फ़ाइल को अरे बफ़र के तौर पर पढ़ें,
डेटा यूआरएल,
या टेक्स्ट:
function readImage(file) {
// Check if the file is an image.
if (file.type && !file.type.startsWith('image/')) {
console.log('File is not an image.', file.type, file);
return;
}
const reader = new FileReader();
reader.addEventListener('load', (event) => {
img.src = event.target.result;
});
reader.readAsDataURL(file);
}
यह उदाहरण, उपयोगकर्ता के दिए गए File को पढ़ता है. इसके बाद, इसे डेटा में बदल देता है
देता है और उस डेटा यूआरएल का इस्तेमाल इमेज को img एलिमेंट में दिखाने के लिए करता है.
उपयोगकर्ता ने कोई इमेज फ़ाइल चुनी है, इसकी पुष्टि करने का तरीका जानने के लिए,
read-image-file डेमो.
पढ़ी गई फ़ाइल की प्रोग्रेस पर नज़र रखना
बड़ी फ़ाइलों को पढ़ते समय, उपयोगकर्ता को उसके बारे में बताने के लिए कुछ UX देना मददगार हो सकता है
पढ़ने से जुड़ी गतिविधि में कितना समय लगता है. इसके लिए,
progress
यह इवेंट FileReader की तरफ़ से उपलब्ध कराया गया. progress इवेंट में दो प्रॉपर्टी होती हैं:
loaded (जो रकम पढ़ी जानी है) और total (जो रकम पढ़ी जानी है).
function readFile(file) {
const reader = new FileReader();
reader.addEventListener('load', (event) => {
const result = event.target.result;
// Do something with result
});
reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
const percent = (event.loaded / event.total) * 100;
console.log(`Progress: ${Math.round(percent)}`);
}
});
reader.readAsDataURL(file);
}
Unस्प्लैश से विंसेंट बोटा की हीरो इमेज