🤶🏿 🚵🏼 👨🏾 फ़ाइलसिस्टम एपीआई और फ़ाइल एपीआई: समझें और उपयोग करें 👲🏽 👧🏽 🥑

इस लेख में, मैं फाइलसिस्टम एपीआई और फाइल एपीआई पर विचार करना चाहता हूं, इसके तरीकों को समझता हूं और कुछ उपयोगी चीजों को दिखाता हूं। यह लेख html5rocks ( 1 , 2 , 3 ) के साथ सामग्रियों का संकलन है। नीचे दिए गए सभी डेमो पहले दो लिंक पर देखे जा सकते हैं। तीसरा लिंक कई दिलचस्प डेमो भी प्रदान करता है। खैर, अब सामग्री का अध्ययन करते हैं।

एक परिचय के रूप में

FileSystem API और File API का उपयोग करके , एक वेब एप्लिकेशन उपयोगकर्ता के सैंडबॉक्स क्षेत्र में स्थित फ़ाइलों को बना, पढ़, देख और लिख सकता है।

एपीआई विवरण को निम्नलिखित वर्गों में विभाजित किया गया है:

फ़ाइलों को पढ़ना और प्रबंधित करना: फ़ाइल / ब्लॉब , फाइललिस्ट , फाइलरीडर
बनाएँ और जलाएँ : BlobBuilder , FileWriter
निर्देशिका और अनुमतियों के साथ कार्य करना: DirectoryReader , FileEntry / DirectoryEntry , LocalFileSystem

वस्तुओं के बारे में कुछ शब्द जिनके साथ काम करना है:

फ़ाइल - फ़ाइल ही; आपको नाम, आकार, mimetype और अधिक के रूप में ऐसी केवल पढ़ने योग्य जानकारी प्राप्त करने की अनुमति देता है।
FileList - फ़ाइल ऑब्जेक्ट की "सरणी"।
बूँद - एक इकाई जो आपको बाइट्स द्वारा फ़ाइल पार्स करने की अनुमति देती है।

ब्राउज़र समर्थन और भंडारण सीमा

लेखन के समय, केवल Google Chrome 9+ में फ़ाइलसिस्टम एपीआई का कार्यशील कार्यान्वयन है। और फिलहाल भंडारण के लिए फ़ाइलों और कोटा के प्रबंधन के लिए कोई संवाद बॉक्स नहीं हैं, इसलिए आपको --unlimited-quota-for-files ध्वज का उपयोग करने की आवश्यकता होगी (क्रोम वेब स्टोर के लिए एप्लिकेशन विकसित करने के मामले में, असीमित स्टॉरेज अनुमति के साथ एक प्रकट होना पर्याप्त होगा)। लेकिन सब कुछ बदल रहा है और उपयोगकर्ताओं को जल्द ही उन फाइलों के साथ काम करने के अधिकारों का प्रबंधन करने का अवसर मिलेगा जो आवेदन द्वारा आवश्यक होंगे।

यदि आपने फ़ाइल का उपयोग करके एप्लिकेशन पर बहस की है तो आपको --allow-file-access-from-files फ्लैग का उपयोग करने की आवश्यकता हो सकती है : // । यदि इस ध्वज का उपयोग नहीं किया जाता है, तो SECURITY_ERR या QUOTA_EXCEEDED_ERR प्रकार के अपवादों को फेंक दिया जाएगा।

हम फ़ाइल सिस्टम से अपील करते हैं

हमारे द्वारा आवश्यक कार्यों के लिए ब्राउज़र समर्थन की जाँच करें

//   File API if (window.File && window.FileReader && window.FileList && window.Blob) { //  } else { alert('File API    '); }

एक वेब एप्लिकेशन निम्न विंडो.requestFileSystem () विधि को कॉल करके फ़ाइल सिस्टम (स्वाभाविक रूप से एक सीमित "सैंडबॉक्स") में पहुंच सकता है:

 window.requestFileSystem(type, size, successCallback, opt_errorCallback)

टाइप

संग्रहण नियम, उपलब्ध विंडो । मंदिर और खिड़की । व्यक्तिगत मान । TEMPORARY कुंजी का उपयोग करके संग्रहीत डेटा को ब्राउज़र के विवेक पर हटाया जा सकता है (उदाहरण के लिए, यदि पर्याप्त स्थान नहीं है)। यदि PERSISTENT कुंजी सेट है, तो उपयोगकर्ता या एप्लिकेशन के कार्यों के बाद ही डेटा को साफ़ किया जा सकता है।

आकार

भंडारण के आकार (बाइट्स) में जो अनुप्रयोग की आवश्यकता होगी।

successCallback

कॉलबैक फ़ंक्शन फ़ाइल सिस्टम के सफल उपयोग के मामले में निष्पादित किया जाता है। इसका तर्क फ़ाइलसिस्टम का एक प्रकार है।

opt_errorCallback

त्रुटियों से निपटने के लिए वैकल्पिक कॉलबैक फ़ंक्शन। यह भी कहा जाता है जब फ़ाइल सिस्टम एक्सेस त्रुटियां होती हैं। पैरामीटर FileError प्रकार है।

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

उदाहरण का उपयोग करें

 function onInitFs(fs) { console.log('Opened file system: ' + fs.name); } window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);

FileSystem विनिर्देश भी सिंक्रोनस ऑपरेशन के लिए एक API का वर्णन करता है, जिसका नाम है LocalFileSystemSync इंटरफ़ेस, जिसे वेब वर्कर्स साझा करने वाले हैं। लेकिन इस लेख में इस एपीआई पर विचार नहीं किया जाएगा।

RequestFileSystem () विधि पर वापस लौटना, यह होने वाली त्रुटियों के संभावित वेरिएंट का वर्णन करने के लायक है:

 function errorHandler(e) { var msg = ''; switch (e.code) { case FileError.QUOTA_EXCEEDED_ERR: msg = 'QUOTA_EXCEEDED_ERR'; break; case FileError.NOT_FOUND_ERR: msg = 'NOT_FOUND_ERR'; break; case FileError.SECURITY_ERR: msg = 'SECURITY_ERR'; break; case FileError.INVALID_MODIFICATION_ERR: msg = 'INVALID_MODIFICATION_ERR'; break; case FileError.INVALID_STATE_ERR: msg = 'INVALID_STATE_ERR'; break; default: msg = 'Unknown Error'; break; }; console.log('Error: ' + msg); }

वर्णित उदाहरण बहुत सरल है, लेकिन संक्षेप में यह उभरती त्रुटियों के साथ आगे के काम की तैयारी है।

फाइलों के साथ काम करें

फ़ाइलों के साथ काम करने के लिए, FileEntry इंटरफ़ेस प्रदान किया गया है। इसकी कई विधियां और गुण हैं जिनका उपयोग हम नियमित फाइलों के साथ जुड़ने के लिए करते हैं। हम उन्हें नीचे देते हैं:

 fileEntry.isFile === true fileEntry.isDirectory === false fileEntry.name fileEntry.fullPath ... fileEntry.getMetadata(successCallback, opt_errorCallback); fileEntry.remove(successCallback, opt_errorCallback); fileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback); fileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback); fileEntry.getParent(successCallback, opt_errorCallback); fileEntry.toURI(opt_mimeType); // Currently not implemented in Google Chrome 9. fileEntry.file(successCallback, opt_errorCallback); fileEntry.createWriter(successCallback, opt_errorCallback); ...

आइए FileEntry के साथ काम करने की मूल बातें देखें।

फ़ाइल निर्माण

आप DirectoryFntry इंटरफ़ेस पर getFile () विधि का उपयोग करके एक फ़ाइल प्राप्त या बना सकते हैं। रिपॉजिटरी तक पहुँचने के बाद, कॉलबैक ने एक फाइलसिस्टम ऑब्जेक्ट डायरेक्टरीइन्स्ट्री (fs.root) को लौटाया, जो रिपॉजिटरी के रूट फ़ोल्डर को संदर्भित करता है।

निम्न कोड एक खाली log.txt फ़ाइल बनाएगा:

 function onInitFs(fs) { fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) { // fileEntry     // fileEntry.isFile === true // fileEntry.name == 'log.txt' // fileEntry.fullPath == '/log.txt' }, errorHandler); } window.requestFileSystem(window.PERSISTENT, 1024*1024, onInitFs, errorHandler);

तो, फ़ाइल भंडारण तक पहुँचने के बाद, हमारे हाथों में फ़ाइलसिस्टम है। कॉलबैक फ़ंक्शन के अंदर, हम fs.root.getFile () विधि को कॉल कर सकते हैं, उस फ़ाइल के नाम से गुजरते हुए जिसे आप बनाना चाहते हैं। एक रिश्तेदार और एक पूर्ण मार्ग दोनों को व्यक्त करना संभव है - मुख्य बात यह है कि यह सच है। उदाहरण के लिए, किसी फ़ाइल का निर्माण त्रुटिपूर्ण होगा यदि उसका मूल फ़ोल्डर मौजूद नहीं है। GetFile () विधि का दूसरा तर्क एक ऑब्जेक्ट है जो उस ऑब्जेक्ट के मापदंडों का वर्णन करता है जो उस पर लागू होगा यदि यह पहले से ही नहीं बनाया गया है। आप प्रलेखन में अधिक पढ़ सकते हैं।

नाम से फाइल पढ़ना

निम्न कोड "log.txt" फ़ाइल तक पहुँचता है और FileReader API का उपयोग करके इसकी सामग्री को पढ़ता है, और फिर सभी सामग्री को <textarea> ब्लॉक पर लिखता है। यदि फ़ाइल मौजूद नहीं है, तो एक त्रुटि डाली जाएगी।

 function onInitFs(fs) { fs.root.getFile('log.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement('textarea'); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.PERSISTENT, 1024*1024, onInitFs, errorHandler);

FileReader, अन्य बातों के अलावा, पढ़ने के लिए निम्नलिखित तरीके प्रदान करता है:

FileReader.readAsBinaryString (बूँद | फ़ाइल) - परिणाम में एक बाइट स्ट्रिंग होगा।
FileReader.readAsText (Blob | File, opt_encoding) - परिणाम में एक पाठ स्ट्रिंग होगा। डिफ़ॉल्ट एन्कोडिंग 'UTF-8' है, आप इसे वैकल्पिक पैरामीटर सेट करके बदल सकते हैं
FileReader.readAsDataURL (Blob | File) - आउटपुट में हमारे पास एक डेटा URL होता है ।
FileReader.readAsArrayBuffer (Blob। File) - हमें ArrayBuffer के रूप में डेटा प्राप्त होता है।

निम्नलिखित उदाहरण में, हम छवि को पढ़ेंगे और उसका थंबनेल प्रदर्शित करेंगे:

 <style> .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } </style> <input type="file" id="files" name="files[]" multiple /> <output id="list"></output> <script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', theFile.name, '"/>'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>

कभी-कभी हमें पूरी फ़ाइल की आवश्यकता नहीं होती है, लेकिन इसका केवल एक हिस्सा है, इसके लिए File.slice (start_byte, length) का उपयोग करना सुविधाजनक है।

यह इस तरह दिखता है:

 var blob = file.slice(startingByte, length); reader.readAsBinaryString(blob);

निम्नलिखित उदाहरण में, हम या तो वांछित बाइट्स या पूरी फ़ाइल पढ़ सकते हैं। Onloadend और evt.target.readyState पर विशेष रूप से ध्यान दें , जो इस मामले में ऑनलोड घटना को बदल देगा। (नीचे की घटनाओं के बारे में)।

 <style> #byte_content { margin: 5px 0; max-height: 100px; overflow-y: auto; overflow-x: hidden; } #byte_range { margin-top: 5px; } </style> <input type="file" id="file" name="file" /> Read bytes: <span class="readBytesButtons"> <button data-startbyte="0" data-endbyte="4">1-5</button> <button data-startbyte="5" data-endbyte="14">6-15</button> <button data-startbyte="6" data-endbyte="7">7-8</button> <button>entire file</button> </span> <div id="byte_range"></div> <div id="byte_content"></div> <script> function readBlob(opt_startByte, opt_stopByte) { var files = document.getElementById('files').files; if (!files.length) { alert('Please select a file!'); return; } var file = files[0]; var start = opt_startByte || 0; var stop = opt_stopByte || file.size - 1; var reader = new FileReader(); // If we use onloadend, we need to check the readyState. reader.onloadend = function(evt) { if (evt.target.readyState == FileReader.DONE) { // DONE == 2 document.getElementById('byte_content').textContent = evt.target.result; document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); } }; var length = (stop - start) + 1; var blob = file.slice(start, length); reader.readAsBinaryString(blob); } document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { if (evt.target.tagName.toLowerCase() == 'button') { var startByte = evt.target.getAttribute('data-startbyte'); var endByte = evt.target.getAttribute('data-endbyte'); readBlob(startByte, endByte); } }, false); </script>

अब घटनाओं के बारे में। FileReader हमें निम्नलिखित घटना प्रकार प्रदान करता है:

onloadstart
onprogress
ऑनलोड,
onabort
onerror
onloadend

जब आप फ़ाइल अपलोड प्रक्रिया प्रदर्शित करने की आवश्यकता होती है तो उनका उपयोग किया जा सकता है। उदाहरण के लिए, इस तरह:

 <style> #progress_bar { margin: 10px 0; padding: 3px; border: 1px solid #000; font-size: 14px; clear: both; opacity: 0; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -webkit-transition: opacity 1s linear; } #progress_bar.loading { opacity: 1.0; } #progress_bar .percent { background-color: #99ccff; height: auto; width: 0; } </style> <input type="file" id="file" name="file" /> <button onclick="abortRead();">Cancel read</button> <div id="progress_bar"><div class="percent">0%</div></div> <script> var reader; var progress = document.querySelector('.percent'); function abortRead() { reader.abort(); } function errorHandler(evt) { switch(evt.target.error.code) { case evt.target.error.NOT_FOUND_ERR: alert('File Not Found!'); break; case evt.target.error.NOT_READABLE_ERR: alert('File is not readable'); break; case evt.target.error.ABORT_ERR: break; // noop default: alert('An error occurred reading this file.'); }; } function updateProgress(evt) { // evt is an ProgressEvent. if (evt.lengthComputable) { var percentLoaded = Math.round((evt.loaded / evt.total) * 100); // Increase the progress bar length. if (percentLoaded < 100) { progress.style.width = percentLoaded + '%'; progress.textContent = percentLoaded + '%'; } } } function handleFileSelect(evt) { // Reset progress indicator on new file selection. progress.style.width = '0%'; progress.textContent = '0%'; reader = new FileReader(); reader.onerror = errorHandler; reader.onprogress = updateProgress; reader.onabort = function(e) { alert('File read cancelled'); }; reader.onloadstart = function(e) { document.getElementById('progress_bar').className = 'loading'; }; reader.onload = function(e) { // Ensure that the progress bar displays 100% at the end. progress.style.width = '100%'; progress.textContent = '100%'; setTimeout("document.getElementById('progress_bar').className='';", 2000); } // Read in the image file as a binary string. reader.readAsBinaryString(evt.target.files[0]); } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>

दर्ज करने के लिए लिखें

निम्नलिखित कोड का उपयोग करते हुए, हम एक "log.txt" फ़ाइल (यदि यह मौजूद नहीं है) बनाएंगे और उस पर 'इप्सम लोरम' लिखेंगे।

 function onInitFs(fs) { fs.root.getFile('log.txt', {create: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { console.log('Write completed.'); }; fileWriter.onerror = function(e) { console.log('Write failed: ' + e.toString()); }; var bb = new BlobBuilder(); bb.append('Ipsum Lorem'); fileWriter.write(bb.getBlob('text/plain')); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.PERSISTENT, 1024*1024, onInitFs, errorHandler);

जैसा कि आप देख सकते हैं, हम ऑब्जेक्ट प्राप्त करने के लिए createWriter () विधि कहते हैं। इसके अलावा, हम एक फ़ाइल में लेखन के अंत और एक त्रुटि के संभावित निर्माण की घटनाओं को संभालते हैं।

फ़ाइल में डेटा जोड़ें

निम्न कोड फ़ाइल के अंत में 'हैलो वर्ल्ड' को जोड़ देगा। यदि कोई फ़ाइल नहीं है, तो एक त्रुटि डाली जाती है।

 function onInitFs(fs) { fs.root.getFile('log.txt', {create: false}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.seek(fileWriter.length); // Start write position at EOF. var bb = new BlobBuilder(); bb.append('Hello World'); fileWriter.write(bb.getBlob('text/plain')); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.PERSISTENT, 1024*1024, onInitFs, errorHandler);

चयनित फ़ाइलों की प्रतियां बनाएँ

निम्न कोड उपयोगकर्ता को <इनपुट प्रकार = "फ़ाइल" एकाधिक> का उपयोग करके कई फ़ाइलों का चयन करने की अनुमति देता है और इन फ़ाइलों की प्रतियां बनाता है।

 <input type="file" id="myfile" multiple />

 document.querySelector('#myfile').onchange = function(e) { var files = this.files; window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { for (var i = 0, file; file = files[i]; ++i) { (function(f) { fs.root.getFile(file.name, {create: true, exclusive: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(f); // Note: write() can take a File or Blob object. }, errorHandler); }, errorHandler); })(file); } }, errorHandler); };

फ़ाइल चयन को सरल बनाने के लिए, आप HTML5 ड्रैग एंड ड्रॉप का उपयोग कर सकते हैं।

 <div id="drop_zone">Drop files here</div> <output id="list"></output> <script> function handleFileSelect(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; // FileList object. // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString(), '</li>'); } document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; } function handleDragOver(evt) { evt.stopPropagation(); evt.preventDefault(); } // Setup the dnd listeners. var dropZone = document.getElementById('drop_zone'); dropZone.addEventListener('dragover', handleDragOver, false); dropZone.addEventListener('drop', handleFileSelect, false); </script>

फ़ाइलों को हटा दें

निम्न कोड 'log.txt' को हटा देगा।

 window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs) { fs.root.getFile('log.txt', {create: false}, function(fileEntry) { fileEntry.remove(function() { console.log('File removed.'); }, errorHandler); }, errorHandler); }, errorHandler);

निर्देशिकाओं के साथ काम करें

निर्देशिकाओं के साथ काम करना DirectoryEntry के उपयोग के माध्यम से पूरा किया जाता है, जिसमें FileEntry के अधिकांश गुण होते हैं (वे दोनों प्रविष्टि इंटरफ़ेस प्राप्त करते हैं)। नीचे DirectoryEntry के गुणों और विधियों की सूची बनाएं।

 dirEntry.isDirectory === true //      FileEntry ... var dirReader = dirEntry.createReader(successCallback, opt_errorCallback); dirEntry.getFile(path, opt_flags, opt_successCallback, opt_errorCallback); dirEntry.getDirectory(path, opt_flags, opt_successCallback, opt_errorCallback); dirEntry.removeRecursively(successCallback, opt_errorCallback); ...

निर्देशिका बनाना

निर्देशिकाओं को बनाने और उन तक पहुंचने के लिए, DirectoryEntry इंटरफ़ेस के getDirectory () का उपयोग करें। आप नाम और निर्देशिका दोनों पथ को पारित कर सकते हैं।

रूट में "MyPictures" निर्देशिका बनाएँ:

 window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs) { fs.root.getDirectory('MyPictures', {create: true}, function(dirEntry) { ... }, errorHandler); }, errorHandler);

उपनिर्देशिका

उपनिर्देशिका बनाना अनिवार्य रूप से निर्देशिका बनाने के समान है, लेकिन याद रखें कि यदि मूल निर्देशिका मौजूद नहीं है, तो एक त्रुटि डाली जाएगी। निम्नलिखित कोड दिखाता है कि इस सीमा के आसपास कैसे जाना है:

 var path = 'music/genres/jazz/'; function createDir(rootDirEntry, folders) { // './'  '/' if (folders[0] == '.' || folders[0] == '') { folders = folders.slice(1); } rootDirEntry.getDirectory(folders[0], {create: true}, function(dirEntry) { if (folders.length) { createDir(dirEntry, folders.slice(1)); } }, errorHandler); }; function onInitFs(fs) { createDir(fs.root, path.split('/')); // fs.root is a DirectoryEntry. } window.requestFileSystem(window.PERSISTENT, 1024*1024, onInitFs, errorHandler);

अब हमने निर्देशिका "संगीत / शैलियों / जैज़" बनाई है और हम किसी भी स्तर पर जा सकते हैं और उनमें नई फाइलें बना सकते हैं। उदाहरण के लिए:

 window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs) { fs.root.getFile('/music/genres/jazz/song.mp3', {create: true}, function(fileEntry) { ... }, errorHandler); }, errorHandler);

निर्देशिका की सामग्री को पार्स करें

यह पता लगाने के लिए कि निर्देशिका में क्या है, आपको एक DirectoryReader बनाने और उसके रीडएंट्री () विधि को कॉल करने की आवश्यकता है, लेकिन इस बात की कोई गारंटी नहीं है कि चयनित निर्देशिका की पूरी सामग्री वापस आ जाएगी (!!!)। इसका मतलब है कि जब तक रिजल्ट खाली न हो, आपको DirectoryReader.readEntries () विधि का उपयोग करना होगा। एक उदाहरण:

 <ul id="filelist"></ul>

 function toArray(list) { return Array.prototype.slice.call(list || [], 0); } function listResults(entries) { var fragment = document.createDocumentFragment(); entries.forEach(function(entry, i) { var img = entry.isDirectory ? '<img src="folder-icon.gif">' : '<img src="file-icon.gif">'; var li = document.createElement('li'); li.innerHTML = [img, '<span>', entry.name, '</span>'].join(''); fragment.appendChild(li); }); document.querySelector('#filelist').appendChild(fragment); } function onInitFs(fs) { var dirReader = fs.root.createReader(); var entries = []; var readEntries = function() { dirReader.readEntries (function(results) { if (!results.length) { listResults(entries.sort()); } else { entries = entries.concat(toArray(results)); readEntries(); } }, errorHandler); }; readEntries(); } window.requestFileSystem(window.PERSISTENT, 1024*1024, onInitFs, errorHandler);

निर्देशिका हटाएं

निकालने के लिए, DirectoryEntry.remove () विधि को कॉल करें। यह जानना महत्वपूर्ण है कि यदि आप एक गैर-रिक्त निर्देशिका को हटाने का प्रयास करते हैं, तो एक त्रुटि डाली जाएगी।

"/ संगीत / शैलियों /" से खाली जैज़ निर्देशिका को हटाएं:

 window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs) { fs.root.getDirectory('music/genres/jazz', {}, function(dirEntry) { dirEntry.remove(function() { console.log('Directory removed.'); }, errorHandler); }, errorHandler); }, errorHandler);

निर्देशिकाओं को पुन: हटा दें

यदि आपके पास एक गैर-खाली निर्देशिका है और फिर भी इसे हटाना चाहते हैं, तो हटाने वाला () विधि आपकी मदद करेगी, जो निर्देशिका और इसकी सभी सामग्री दोनों को हटा देगा।

हम इस ऑपरेशन को "संगीत" निर्देशिका के साथ करते हैं:

 window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs) { fs.root.getDirectory('/misc/../music', {}, function(dirEntry) { dirEntry.removeRecursively(function() { console.log('Directory removed.'); }, errorHandler); }, errorHandler); }, errorHandler);

कॉपी, नाम बदलें और स्थानांतरित करें

FileEntry और DirectoryEntry इस पहलू में पूरी तरह समान हैं।

प्रतिलिपि

FileEntry और DirectoryEntry दोनों में कॉपी करने के लिए एक copyTo () विधि है। निर्देशिकाओं के मामले में, विधि पुन: सभी सामग्री बना देगी।

एक निर्देशिका से दूसरे में "me.png" की प्रतिलिपि बनाएँ:

 function copy(cwd, src, dest) { cwd.getFile(src, {}, function(fileEntry) { cwd.getDirectory(dest, {}, function(dirEntry) { dirEntry.copyTo(dirEntry); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs) { copy(fs.root, '/folder1/me.png', 'folder2/mypics/'); }, errorHandler);

स्थानांतरित या नाम बदलना

FileEntry and DirectoryEntry में एक MoveTo () विधि है जो आपको फ़ाइलों और निर्देशिकाओं को स्थानांतरित करने और नाम बदलने की अनुमति देती है। पहला तर्क मूल फ़ोल्डर है, दूसरा (वैकल्पिक) पैरामीटर नया नाम है।

"Me.png" को "you.png" नाम दें:

 function rename(cwd, src, newName) { cwd.getFile(src, {}, function(fileEntry) { fileEntry.moveTo(cwd, newName); }, errorHandler); } window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs) { rename(fs.root, 'me.png', 'you.png'); }, errorHandler);

रूट निर्देशिका से "me.png" को "newfolder" पर ले जाएं।

 function move(src, dirName) { fs.root.getFile(src, {}, function(fileEntry) { fs.root.getDirectory(dirName, {}, function(dirEntry) { fileEntry.moveTo(dirEntry); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.PERSISTENT, 1024*1024, function(fs) { move('/me.png', 'newfolder/'); }, errorHandler);

मामलों का उपयोग करें

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

यहां संभावित उपयोगों की एक सूची दी गई है:

अपलोडर फ़ाइलें
मीडिया फ़ाइलों के साथ काम करने वाले गेम और एप्लिकेशन
ऑफ़लाइन मोड के साथ ऑडियो / फोटो संपादक
ऑफ़लाइन वीडियो प्लेयर
ऑफ़लाइन ईमेल क्लाइंट

फ़ाइलसिस्टम एपीआई और फ़ाइल एपीआई: समझें और उपयोग करें