Filereader पढ़ने के लिए के रूप में द्विआधारी विकल्प

एक श्रृंखला की एक श्रृंखला के भाग के रूप में मैं उन चुनौतियों के बारे में चर्चा कर रहा हूं जिनके सामने मुझे एक HTML5 और जावास्क्रिप्ट मुक्त ऑनलाइन आइकॉन संपादक बनाने की कोशिश करनी थी। मैं चाहता था कि उपयोगकर्ता अपने आइकन संपादक में मौजूद आइकन फ़ाइलों को खोल और संपादित कर सकें। चूंकि आइकन फ़ाइलों में कई फ़्रेम होते हैं, मुझे इन व्यक्तिगत फ़्रेमों तक पहुंचने की आवश्यकता है ताकि वे प्रदर्शित हो सकें और उपयोगकर्ता के लिए संपादन कर सकें। आइकन के भीतर मौजूद फ़्रेमों की संख्या, आकार और स्थान सभी आइकन शीर्षलेख में संग्रहीत है। आइकन हैडर एक संग्रह बाइट है जो आइकन फ़ाइल की शुरुआत में स्थित है, इसलिए मुझे फ़ाइल में मौजूद बायनरी डेटा को पढ़ने की आवश्यकता है। हम किसी भी डेटा को किसी सर्वर पर वापस भेजने के बिना ब्राउज़र में फ़ाइलों को आसानी से पढ़ सकते हैं इस किस्त में मैं यह दिखाता हूं कि आप एचटीएमएल 5 फ़ाईल एपीआई के उपयोग से ब्राउजर में एक स्थानीय फाइल के द्विआधारी डेटा कैसे पढ़ सकते हैं। शुरू करने के लिए एक इनपुट तत्व जोड़ते हैं और फाइल करने के लिए टाइप एट्रिब्यूट सेट करते हैं, फिर एक स्क्रिप्ट ब्लॉकों में हम फाइल इनप्लॉम्स onchange इवेंट को संभालने जा रहे हैं। lt शरीर gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 160,160,160,160 lt इनपुट आईडी quotbrowseOpenquot प्रकार quotfilequot जीटी 160,160,160,160 lt स्क्रिप्ट प्रकार quottextjavascriptquot जीटी 160160160160160160160160 वर fileInput document. getElementById (quotbrowseOpenquot) 160160160160160160160160 fileInput. onchange समारोह () 160160160160160160160160160160160160 कोड onchange घटना को संभालने के लिए यहाँ 160,160,160,160 160,160,160,160 160,160,160,160 lt स्क्रिप्ट जीटी lt शरीर जीटी चला जाता है अब हम बदलते ईवेंट को संभालने के लिए कोड जोड़ना चाहते हैं यहां हम एक FileReader ऑब्जेक्ट बनाने जा रहे हैं। हम readAsBinaryString विधि का उपयोग FileReader ऑब्जेक्ट के लिए करेंगे जो हमें कच्चे बाइनरी डेटा देगा। हम एक फ़ाइल ऑब्जेक्ट को readAsBinaryString पर पास कर सकते हैं यदि हम पूरी फाइल पढ़ना चाहते हैं या हम एक ब्लॉब ऑब्जेक्ट पास कर सकते हैं यदि हम एक फ़ाइल के एक निश्चित खंड को पढ़ना चाहते हैं। इस उदाहरण में हम पूरी फाइल को पढ़ने के लिए एक फ़ाइल ऑब्जेक्ट पास करने जा रहे हैं। हमें भी FileReader के ओलोडेंड इवेंट को संभालना आवश्यक है क्योंकि जैसा कि हम readAsBinaryString के साथ पढ़ा हुआ डेटा केवल संपूर्ण फ़ाइल या ब्लॉब को FileReader द्वारा पढ़े जाने के बाद उपयोग करने के लिए उपलब्ध है। हमारा कोड ऑन-चेंज इवेंट हैंडलर में अब इस तरह दिखता है। 160160160160160160160160 var फ़्री फ़ॉररिडर () 160160160160160160160160 fr. onloadend फ़ंक्शन () 160160160160160160160160160160160160 संहिता के लिए ऑनलोडेंड घटना को संभाल 160160160160 160160160160 160160160160160160160160 fr. readAsBinaryString (यह. फ़ाइलें 0) ओलोडेंड ईवेंट हैंडलर में हम उस डेटा का उपयोग कर सकते हैं जो अभी फ़ाइल रीडर के माध्यम से पढ़ा गया है परिणाम विशेषता हम फिर परिणाम विशेषता के माध्यम से पाश कर सकते हैं और प्रत्येक बाइट के पूर्णांक मान को वापस करने के लिए charCodeAt विधि को कॉल कर सकते हैं। इस उदाहरण में मैं एक बाइट को एक हेक्साडेसिमल स्ट्रिंग प्रस्तुति में स्ट्रिंग (16) के लिए कन्वर्ट करने जा रहा हूं, एक लंबी स्ट्रिंग तैयार करें और फिर उपयोगकर्ता को स्ट्रिंग प्रदर्शित करें। पूरी तरह काम उदाहरण है lt DOCTYPE HTML जीटी lt एचटीएमएल जीटी lt सिर जीटी 160160160160 lt शीर्षक फ़ाइल एपीआई और JavaScriptlt शीर्षक जीटी lt सिर जीटी lt शरीर gt160160160160160160160160160160160160160160160160160160160160160160160160160160160160 160160160160 lt इनपुट आईडी quotbrowseOpenquot प्रकार quotfilequot जीटी 160160160160 lt स्क्रिप्ट प्रकार quottextjavascriptquot जीटी 160160160160160160160160 वर fileInput document. getElementById साथ gtReading बाइनरी डेटा (quotbrowseOpenquot) 160160160160160160160160 fileInput. onchange समारोह () 160160160160160160160160160160160160 वर fr नई FileReader () 160160160160160160160160160160160160 fr. onloadend समारोह () 160160160160160160160160160160160160160160160160 वर परिणाम इस. result के लिए 160160160160160160160160160160160160160160160160 वर हेक्स quotquot 160160160160160160160160160160160160160160160160 (वर मैं 0 मैं इस. result. length मैं lT) 160160160160160160160160160160160160160160160160160160160160 var बाइट्सट्र परिणाम. चर्कोडाएट (आई).टस्टिंग (16) 160160160160160160160160160160160 160160160160160160160160160 अगर (byteStr. length लीटर 2) 160160160160160160160160160160160160160160160160160160160160160160160160 byteStr quot0quot byteStr 160160160160160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160160160160160 हेक्स quot quot byteStr 160160160160160160160160160160160160160160160160 160160160160160160160160160160160160160160160160 चेतावनी (हेक्स) 160160160160160160160160160160160160 160160160160160160160160160160160160 fr. readAsBinaryString (इस. files 0) 160160160160160160160160 160,160,160,160 lt स्क्रिप्ट जीटी lt शरीर जीटी lt एचटीएमएल फाइलों के साथ में gtWorking जावास्क्रिप्ट, भाग 2: फ़ाइल रीडर 15 मई, 2018 को निकोलस सी। जैकस द्वारा पोस्ट किया गया मेरी पिछली पोस्ट में मैंने फाइल ऑब्जेक्ट्स तक पहुंच प्राप्त करने के लिए विशेष रूप से ध्यान केंद्रित करते हुए, जावास्क्रिप्ट में फ़ाइलों का उपयोग शुरू किया। इन ऑब्जेक्ट में केवल फ़ाइल मेटाडेटा प्राप्त होता है, जब उपयोगकर्ता फाइल अपलोड करने या ड्रैग करने के लिए विकल्प चुनता है और फ़ाइल को वेब पेज पर छोड़ देता है। आपके पास फाइल होने के बाद, हालांकि, अगले चरण उनसे डेटा पढ़ना है। FileReader प्रकार FileReader प्रकार का एक एकल कार्य है: एक फ़ाइल से डेटा पढ़ने के लिए और उसे जावास्क्रिप्ट चर में संग्रहीत करें। एपीआई जानबूझकर XMLHttpRequest के समान होने के लिए डिज़ाइन किया गया था, क्योंकि दोनों ब्राउज़र (बाहरी ब्राउज़र) संसाधन से डेटा लोड कर रहे हैं। पढ़ने के लिए एसिंक्रोनस किया जाता है ताकि ब्राउज़र को ब्लॉक नहीं किया जा सके। कई प्रारूप हैं जो एक फ़ाइल रीडर फ़ाइल डेटा का प्रतिनिधित्व करने के लिए बना सकते हैं, और फ़ाइल को पढ़ने के लिए कहने पर फ़ॉर्मेट का अनुरोध किया जाना चाहिए। इन विधियों में से किसी एक को कॉल करने के द्वारा पढ़ा जाता है: readAsText () 8211 फ़ाइल सामग्री को सादा पाठ पढ़ता है, जैसा कि एएसबीरीएस्ट्रिंग () 8211 देता है, फ़ाइल सामग्री को एन्कोडेड बाइनरी डेटा की स्ट्रिंग के रूप में देता है (इसके बजाय 8211 का उपयोग readAsArrayBuffer () का उपयोग किया जाता है) readAsArrayBuffer () 8211 रिटर्न फ़ाइल सामग्री को एक ArrayBuffer (बाइनरी डेटा जैसे छवियों के लिए) readAsDataURL () 8211 फ़ाइल सामग्री को डेटा यूआरएल के रूप में देता है इनमें से प्रत्येक विधि XHR ऑब्जेक्ट के समान पढ़ा जाने वाला एक फ़ाइल आरम्भ करता है, ऑब्जेक्ट 8217 भेजने () एक HTTP अनुरोध शुरू करने की विधि जैसे, आपको पढ़ना प्रारंभ करने से पहले लोड ईवेंट के लिए सुनना चाहिए। पढ़ने का परिणाम हमेशा event. target. result द्वारा दर्शाया जाता है उदाहरण के लिए: यह उदाहरण केवल एक फ़ाइल की सामग्री को पढ़ता है और उसे कंसोल के सादे पाठ में आउटपुट करता है। ओलोड हेन्डलर को तब कहा जाता है जब फ़ाइल को सफलतापूर्वक पढ़ा जाता है, जबकि आतंक के हेन्डलर को कहा जाता है अगर फ़ाइल wasn8217t किसी कारण के लिए पढ़ा जाता है। FileReader उदाहरण event. target के माध्यम से ईवेंट हैंडलर के अंदर उपलब्ध है और इसे इस्तेमाल करने के लिए सिफारिश की गई है कि पाठक चर सीधे संदर्भित करने के बजाय नतीजे की संपत्ति में सफलता की फाइल सामग्री शामिल है और त्रुटि में असफल कार्रवाई के बारे में त्रुटि की जानकारी शामिल है। डेटा यूआरआई पढ़ना आप डेटा यूआरआई को पढ़ने के लिए एक ही बुनियादी सेटअप का उपयोग कर सकते हैं। डेटा यूआरआई (कभी-कभी डेटा यूआरएल कहलाते हैं) एक दिलचस्प विकल्प हैं यदि आप चाहते हैं, उदाहरण के लिए, एक छवि प्रदर्शित करें जो डिस्क से पढ़ी गई थी। आप निम्न कोड के साथ ऐसा कर सकते हैं: यह कोड केवल ऐसी छवि को सम्मिलित करता है जिसे डिस्क से एक पृष्ठ में पढ़ा गया था। चूंकि डेटा यूआरआई में सभी छवि डेटा शामिल हैं, इसलिए इसे सीधे छवि के स्रोत विशेषता में पारित किया जा सकता है और पृष्ठ पर प्रदर्शित किया जा सकता है। आप, वैकल्पिक रूप से, छवि को लोड कर सकते हैं और इसे एक एलटीकेनवासट पर भी आकर्षित कर सकते हैं: यह कोड एक नए छवि ऑब्जेक्ट में छवि डेटा को लोड करता है और फिर उस कैनवास पर छवि खींचना (100 और चौड़ाई दोनों को निर्दिष्ट करता है) का उपयोग करता है। डेटा यूआरआई का आमतौर पर इस उद्देश्य के लिए उपयोग किया जाता है, लेकिन किसी भी प्रकार की फ़ाइल पर इसका इस्तेमाल किया जा सकता है। किसी डेटा यूआरआई में एक फ़ाइल को पढ़ने के लिए सबसे आम उपयोग केस फाइल सामग्री को तुरंत वेब पेज पर प्रदर्शित करना है ArrayBuffers पढ़ना ArrayBuffer type 1 पहले WebGL के भाग के रूप में पेश किया गया था। एक अर्रेबफर एक सीमित संख्या में बाइट्स का प्रतिनिधित्व करता है जिसका उपयोग किसी भी आकार की संख्या को संग्रहीत करने के लिए किया जा सकता है। जिस तरह से डेटा को किसी अर्रेबफर से पढ़ा जाता है, वह विशिष्ट दृश्य, जैसे कि Int8Array, का उपयोग करके है। जो अंतर्निहित बाइट्स को 8-बिट हस्ताक्षरित पूर्णांक या फ्लोट 32 एरेरे के संग्रह के रूप में मानता है। जो अंतर्निहित बाइट्स को 32-बिट फ़्लोटिंग बिंदु संख्याओं के संग्रह के रूप में मानता है। इन्हें टाइप एरेज़ कहा जाता है 2. जो कि आप किसी भी प्रकार के डेटा (पारंपरिक सरणियों के साथ) को बनाए रखने के बजाय एक विशिष्ट संख्यात्मक प्रकार के साथ काम करने के लिए मजबूर करते हैं डेटा पर अधिक सुपुर्दगी नियंत्रण रखने के लिए, आप बायररी फ़ाइलों के साथ व्यवहार करते समय मुख्यतः एक अर्रेबफर का उपयोग करते हैं। ArrayBuffer के सभी इंस और बहिष्कारों को समझाने के लिए इस पोस्ट के दायरे से परे यह 8217 बस एहसास है कि आप एक फ़ाइल को एक ArrayBuffer में बहुत आसानी से पढ़ सकते हैं यदि आपको इसकी आवश्यकता है आप सीधे एक्सएचआर के ऑब्जेक्ट 8217 में एरेबफर को पास कर सकते हैं () को सर्वर पर कच्चे डेटा भेजने के लिए (आप को फाइल को फिर से संगठित करने के लिए सर्वर पर अनुरोध से यह डेटा पढ़ना होगा I8217ll) भेजें, जब तक कि आपका ब्राउज़र पूरी तरह से XMLHttpRequest स्तर का समर्थन करता है 2 3 (सबसे हाल के ब्राउज़र, जिनमें इंटरनेट एक्सप्लोरर 10 और ओपेरा 12 शामिल है)। FileReader का उपयोग करते हुए फ़ाइल से डेटा पढ़ना बहुत सरल है यदि आप जानते हैं कि XMLHttpRequest का उपयोग कैसे करें वहाँ 8217s कोई कारण नहीं तुम can8217t भी फ़ाइलों से डेटा पढ़ा जा सकता है। इस श्रृंखला के अगले भाग में, आप 8217ll FileReader ईवेंट का उपयोग करने और संभावित त्रुटियों के बारे में और अधिक समझने के बारे में अधिक जानें। संदर्भ अस्वीकरण: इस लेख में व्यक्त किसी भी दृष्टिकोण और राय निकोलस सी। जैकस के हैं और किसी भी तरह से, मेरे नियोक्ता, मेरे सहयोगियों, डब्लूक्स पब्लिशिंग ओरेली पब्लिशिंग या किसी और को मैं केवल अपने लिए बोलता हूं, उनके लिए नहीं। हाल के पोस्ट अतिरिक्त सूचनाफिल्मरेडर। रीडएबरीस्ट्रिंग () गैर-मानक यह सुविधा गैर-मानक है और मानक ट्रैक पर नहीं है। वेब का सामना करने वाले उत्पादन स्थलों पर इसका उपयोग न करें: यह हर उपयोगकर्ता के लिए काम नहीं करेगा कार्यान्वयन के बीच बड़ी असंगतियां भी हो सकती हैं और भविष्य में व्यवहार बदल सकता है। ReadAsBinaryString विधि निर्दिष्ट बूँद या फ़ाइल की सामग्री पढ़ने शुरू करने के लिए प्रयोग किया जाता है। जब पढ़ना कार्य समाप्त हो जाता है, तो तैयारस्थान समाप्त हो जाता है और भारन शुरू हो गया है। उस समय, परिणाम विशेषता में फाइल से कच्चे बाइनरी डेटा होता है। ध्यान दें कि इस पद्धति को अब डब्लू 3 सी से 12 जुलाई 2018 वर्किंग ड्राफ्ट के अनुसार नापसंद किया गया है। पैरामीटर ब्लॉब ब्लॉब या फ़ाइल जिसमें से पढ़ने के लिए है। निर्दिष्टीकरण इस विधि को FileAPI मानक से हटा दिया गया है। इसके बजाय FileReader. readAsArrayBuffer () का उपयोग किया जाना चाहिए। 1 गीको 2.0 बीटा 7 (फ़ायरफ़ॉक्स 4.0 बीटा 7) से पहले, नीचे सभी ब्लॉब पैरामीटर फ़ाइल मापदंड थे जो कि तब से विनिर्देश को सही ढंग से मैच करने के लिए अद्यतन किया गया है। गिक्को 13.0 से पहले (फ़ायरफ़ॉक्स 13.0 थंडरबर्ड 13.0 सागरमोन्की 2.10) फाइलरडर। आतंक प्रॉपर्टी ने एक फ़ाइलईवर ऑब्जेक्ट लौटा दिया। यह इंटरफ़ेस हटा दिया गया है और FileReader. error अब नवीनतम FileAPI ड्राफ़्ट में परिभाषित DOMError ऑब्जेक्ट को वापस कर रहा है। क्या यह लेख सहायक दस्तावेज़ टैग और योगदानकर्ता धन्यवाद कृपया अपनी सदस्यता की पुष्टि करने के लिए अपने इनबॉक्स की जांच करें। यदि आपने पहले किसी मोज़िला-संबंधित न्यूजलेटर की सदस्यता की पुष्टि की थी, तो आपको ऐसा करना पड़ सकता है कृपया हमें एक ईमेल के लिए अपने इनबॉक्स या स्पैम फ़िल्टर की जांच करें। न्यूज़लेटर साइन-अप कॉपी 2005-2017 मोज़िला डेवलपर नेटवर्क और व्यक्तिगत योगदानकर्ताओं को छुपाएं। सामग्री इन लाइसेंसों के अंतर्गत उपलब्ध है.FileReader पूरे पठन अनुरोध पूरा हो गया है। FileReader. result केवल पढ़ने के लिए फ़ाइलें सामग्री पठन कार्य पूर्ण होने के बाद यह प्रॉपर्टी केवल वैध है, और डेटा का प्रारूप निर्भर करता है कि रीड ऑपरेशन आरंभ करने के लिए किस विधि का उपयोग किया गया था। इवेंट हैंडलर FileReader. onabort एबॉर्ट घटना के लिए एक हेन्डलर। इस घटना को हर बार पढ़ने का कार्य निरस्त कर दिया गया है। FileReader. errorerror त्रुटि ईवेंट के लिए एक हेन्डलर इस घटना को हर बार पढ़ने के दौरान त्रुटि का सामना करना पड़ता है। लोड ईवेंट के लिए FileReader. onload हेडलर। इस घटना को हर बार पठन कार्य सफलतापूर्वक पूरा किया जाता है। LoadRad घटना के लिए FileReader. onloadstart एक हेन्डलर। प्रत्येक बार पढ़ने शुरू होने पर यह घटना शुरू हो जाती है। FileReader. onloadend लोडर ईवेंट के लिए एक हेन्डलर। यह घटना हर बार पढ़ने का कार्य पूरा हो गया है (सफलता या असफलता में)। FileReader. progress प्रगति कार्यक्रम के लिए एक हेन्डलर। ब्लॉब सामग्री पढ़ने के दौरान इस घटना को शुरू किया गया है। जैसा FileReader को EventTarget से मिलता है addEventListener विधि का उपयोग करके उन सभी घटनाओं को भी सुन लिया जा सकता है FileReader. abort () पढ़ने के कार्य को बंद कर देता है। वापसी पर, तैयार हो जाएगा। FileReader. readAsArrayBuffer () निर्दिष्ट बूँद की सामग्री को पढ़ने शुरू करता है। एक बार समाप्त होने पर, परिणाम विशेषता में डेटा डेटा का प्रतिनिधित्व करने वाले एक अर्रेबफर शामिल होता है। FileReader. readAsBinaryString () निर्दिष्ट बूँद की सामग्री को पढ़ने शुरू करता है एक बार समाप्त होने पर, परिणाम विशेषता में स्ट्रिंग के रूप में फ़ाइल से कच्चे बाइनरी डेटा शामिल होता है। FileReader. readAsDataURL () निर्दिष्ट ब्लॉब की सामग्री को पढ़ने शुरू करता है। एक बार समाप्त होने पर, परिणाम विशेषता में डेटा होता है: यूआरएल फाइल डेटा का प्रतिनिधित्व करता है। FileReader. readAsText () निर्दिष्ट ब्लॉब की सामग्री को पढ़ने शुरू करता है। एक बार समाप्त होने पर, परिणाम विशेषता में फ़ाइल की सामग्री को एक टेक्स्ट स्ट्रिंग के रूप में शामिल किया गया है। निर्दिष्टीकरण 1 गीको 2.0 बीटा 7 (फ़ायरफ़ॉक्स 4.0 बीटा 7) से पहले, नीचे सभी ब्लॉब पैरामीटर फ़ाइल पैरामीटर थे जो कि तब से विनिर्देश को सही ढंग से मैच करने के लिए अद्यतन किया गया है। गिक्को 13.0 से पहले (फ़ायरफ़ॉक्स 13.0 थंडरबर्ड 13.0 सागरमोन्की 2.10) फाइलरडर। आतंक प्रॉपर्टी ने एक फ़ाइलईवर ऑब्जेक्ट लौटा दिया। यह इंटरफ़ेस हटा दिया गया है और FileReader. error अब नवीनतम FileAPI ड्राफ़्ट में परिभाषित DOMError ऑब्जेक्ट को वापस कर रहा है। क्या यह लेख सहायक दस्तावेज़ टैग और योगदानकर्ता धन्यवाद कृपया अपनी सदस्यता की पुष्टि करने के लिए अपने इनबॉक्स की जांच करें। यदि आपने पहले किसी मोज़िला-संबंधित न्यूजलेटर की सदस्यता की पुष्टि की थी, तो आपको ऐसा करना पड़ सकता है कृपया हमें एक ईमेल के लिए अपने इनबॉक्स या स्पैम फ़िल्टर की जांच करें। न्यूज़लेटर साइन-अप कॉपी 2005-2017 मोज़िला डेवलपर नेटवर्क और व्यक्तिगत योगदानकर्ताओं को छुपाएं। सामग्री इन लाइसेंसों के अंतर्गत उपलब्ध है