JavaScript
फ़ाइल एपीआई, ब्लॉब्स और फ़ाइलरेडर्स

वाक्य - विन्यास

• पाठक = नया फ़ाइल-लेखक ();

पैरामीटर

टिप्पणियों

स्ट्रिंग के रूप में फ़ाइल पढ़ें

सुनिश्चित करें कि आपके पेज पर एक फ़ाइल इनपुट है:

<input type="file" id="upload">

फिर जावास्क्रिप्ट में:

document.getElementById('upload').addEventListener('change', readFileAsString)
function readFileAsString() {
    var files = this.files;
    if (files.length === 0) {
        console.log('No file is selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        console.log('File content:', event.target.result);
    };
    reader.readAsText(files[0]);
}

डेटा के रूप में फ़ाइल पढ़ें

एक वेब अनुप्रयोग के भीतर एक फ़ाइल की सामग्री को पढ़ना HTML5 फ़ाइल एपीआई का उपयोग करके पूरा किया जा सकता है। सबसे पहले, अपने HTML में type="file" साथ एक इनपुट जोड़ें:

<input type="file" id="upload">

अगला, हम फ़ाइल-इनपुट पर एक परिवर्तन श्रोता जोड़ने जा रहे हैं। यह उदाहरण जावास्क्रिप्ट के माध्यम से श्रोता को परिभाषित करता है, लेकिन इसे इनपुट तत्व पर विशेषता के रूप में भी जोड़ा जा सकता है। हर बार एक नई फ़ाइल चयनित होने पर यह श्रोता ट्रिगर हो जाता है। इस कॉलबैक के भीतर, हम उस फ़ाइल को पढ़ सकते हैं जिसे चयनित किया गया था और आगे की कार्रवाई कर रहा है (जैसे चयनित फ़ाइल की सामग्री के साथ एक छवि बनाना):

document.getElementById('upload').addEventListener('change', showImage);

function showImage(evt) {
    var files = evt.target.files;

    if (files.length === 0) {
        console.log('No files selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            document.body.appendChild(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}

एक फ़ाइल स्लाइस

blob.slice() विधि का उपयोग स्रोत ब्लॉब के निर्दिष्ट बाइट्स में डेटा युक्त एक नई ब्लॉब ऑब्जेक्ट बनाने के लिए किया जाता है। यह विधि फ़ाइल उदाहरणों के साथ भी प्रयोग करने योग्य है, क्योंकि फ़ाइल बूँद को बढ़ाती है।

यहां हम विशिष्ट मात्रा में ब्लब्स में एक फ़ाइल को स्लाइस करते हैं। यह विशेष रूप से उन मामलों में उपयोगी है, जहां आपको उन फ़ाइलों को संसाधित करने की आवश्यकता होती है जो एक बार में सभी मेमोरी में पढ़ने के लिए बहुत बड़ी हैं। हम तब FileReader का उपयोग करके एक के बाद एक विखंडू पढ़ सकते हैं।

/**
* @param {File|Blob} - file to slice
* @param {Number} - chunksAmount
* @return {Array} - an array of Blobs
**/
function sliceFile(file, chunksAmount) {
  var byteIndex = 0;
  var chunks = [];
    
  for (var i = 0; i < chunksAmount; i += 1) {
    var byteEnd = Math.ceil((file.size / chunksAmount) * (i + 1));
    chunks.push(file.slice(byteIndex, byteEnd));
    byteIndex += (byteEnd - byteIndex);
  }

  return chunks;
}

ग्राहक पक्ष सीएसवी बूँद का उपयोग कर डाउनलोड करें

function downloadCsv() {
  var blob = new Blob([csvString]);
  if (window.navigator.msSaveOrOpenBlob){
    window.navigator.msSaveBlob(blob, "filename.csv");
  }
  else {
    var a = window.document.createElement("a");

    a.href = window.URL.createObjectURL(blob, {
      type: "text/plain"
    });
    a.download = "filename.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}
var string = "a1,a2,a3";
downloadCSV(string);

स्रोत का संदर्भ; https://github.com/mholt/PapaParse/issues/175

कई फ़ाइलों का चयन करना और फ़ाइल प्रकारों को प्रतिबंधित करना

HTML5 फ़ाइल API आपको फ़ाइल इनपुट पर केवल स्वीकार विशेषता सेट करके किस प्रकार की फ़ाइलों को स्वीकार करने की अनुमति देता है, जैसे:

<input type="file" accept="image/jpeg">

कॉमा द्वारा अलग किए गए कई MIME प्रकार निर्दिष्ट करना (जैसे image/jpeg,image/png ) या वाइल्डकार्ड का उपयोग करना (उदाहरण के लिए image/* सभी प्रकार की छवियों को अनुमति देने के लिए) आपको उन फ़ाइलों के प्रकार को प्रतिबंधित करने का एक त्वरित और शक्तिशाली तरीका प्रदान करता है जिन्हें आप चुनना चाहते हैं। । यहां किसी भी छवि या वीडियो को अनुमति देने के लिए एक उदाहरण दिया गया है:

<input type="file" accept="image/*,video*">

डिफ़ॉल्ट रूप से, फ़ाइल इनपुट उपयोगकर्ता को एक एकल फ़ाइल का चयन करने देता है। यदि आप एकाधिक फ़ाइल चयन को सक्षम करना चाहते हैं, तो बस multiple विशेषता जोड़ें:

<input type="file" multiple>

फिर आप फ़ाइल इनपुट की files सरणी के माध्यम से सभी चयनित फ़ाइलों को पढ़ सकते हैं। डेटा के रूप में रीड फ़ाइल देखें

फ़ाइल के गुण प्राप्त करें

यदि आप फ़ाइल के गुणों को प्राप्त करना चाहते हैं (जैसे नाम या आकार) तो आप फ़ाइल रीडर का उपयोग करने से पहले कर सकते हैं। अगर हमारे पास कोड का निम्नलिखित HTML टुकड़ा है:

<input type="file" id="newFile">

आप इस तरह सीधे संपत्तियों तक पहुँच सकते हैं:

document.getElementById('newFile').addEventListener('change', getFile);

function getFile(event) {
    var files = event.target.files
        , file = files[0];

    console.log('Name of the file', file.name);
    console.log('Size of the file', file.size);
}

आप निम्न विशेषताएँ भी आसानी से प्राप्त कर सकते हैं: lastModified (टाइमस्टैम्प), lastModifiedDate (दिनांक), और type (फ़ाइल प्रकार)