जावास्क्रिप्ट के साथ एक स्थानीय डिस्क फ़ाइल कैसे खोलें?

Question

मैंने फ़ाइल खोलने की कोशिश की

window.open("file:///D:/Hello.txt");

ब्राउज़र इस तरह से स्थानीय फ़ाइल खोलने की अनुमति नहीं देता है, शायद सुरक्षा कारणों से। मैं क्लाइंट साइड में फ़ाइल के डेटा का उपयोग करना चाहता हूं। मैं जावास्क्रिप्ट में स्थानीय फ़ाइल कैसे पढ़ सकता हूं?

Answer 1

यहाँ एक उदाहरण का उपयोग कर रहा है FileReader:

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

document.getElementById('file-input')
  .addEventListener('change', readSingleFile, false);

<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>

---

ऐनक

http://dev.w3.org/2006/webapi/FileAPI/

ब्राउज़र संगतता

• IE 10+
• फ़ायरफ़ॉक्स 3.6+
• क्रोम 13+
• सफारी 6.1+

http://caniuse.com/#feat=fileapi

Comments

बस एक सेकंड, जब मैं उसी अंतिम फ़ाइल को पुनः लोड करता हूं, तो सामग्री नहीं बदलती (मैं इसकी सामग्री के बारे में कहता हूं, जब मैं फ़ाइल पाठ को संपादित करता हूं)। क्या आप मदद कर सकते हैं?

— हाइड्रोपर

@SamusHands हाँ, आप सही हैं, मैं सफारी और क्रोम में समस्या को पुन: उत्पन्न कर सकता हूं (यह फ़ायरफ़ॉक्स में ठीक काम करता है)। nullप्रत्येक onClickईवेंट पर इनपुट का मान सेट करते हुए चाल चलनी चाहिए, देखें: stackoverflow.com/a/12102992/63011

— पाओलो मोराती

यह एक उदाहरण के रूप में अच्छा है FileReader, लेकिन displayContentsइसके बाद के संस्करण पर एक टिप्पणी : ध्यान दें कि innerHTMLअविश्वसनीय सामग्री के साथ इस तरह की सेटिंग सुरक्षा भेद्यता हो सकती है। (अपने लिए यह देखने के लिए, एक bad.txtयुक्त चीज़ बनाएं <img src="/nonexistent" onerror="alert(1);">और देखें कि अलर्ट निष्पादित हो जाता है - यह अधिक दुर्भावनापूर्ण कोड हो सकता है।)

— श्रीवत्सआर

@ श्रीवत्सआर वास्तव में अच्छी बात है। मेरा स्निपेट केवल एक उदाहरण है, लेकिन आप सही हैं, यह बुरी सुरक्षा आदतों को बढ़ावा नहीं देना चाहिए। मैंने innerHTMLसाथ दिया textContent। आपके कमेंट के लिए धन्यवाद।

— पाओलो मोरेटी

@TeylerHalama आप इसके लिए DOMContentLoadedईवेंट का उपयोग भी कर सकते हैं ।

— पाओलो मोरेटी

Answer 2

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

मैं वर्तमान में क्रोम (6.x) के विकास संस्करणों के साथ इसका उपयोग करता हूं। मुझे नहीं पता कि अन्य ब्राउज़र इसका क्या समर्थन करते हैं।

Comments

अभी, यह HTML5 के साथ संभव है। यहां देखें

— फ्लाविएन वोल्‍कन

संदर्भित युक्ति का एक त्वरित स्कैन (अंतिम अपडेट 2012-07-12) फ़ाइल लेखन के लिए कोई सुविधा नहीं दिखाता है, केवल पढ़ना।

— HBP

Answer 3

क्योंकि मेरे पास कोई जीवन नहीं है और मैं उन 4 प्रतिष्ठा बिंदुओं को चाहता हूं, ताकि मैं अपने प्यार को (उन लोगों द्वारा उत्तर दें) को दिखा सकूं, जो वास्तव में कोडिंग में अच्छे हैं मैंने पाओलो मोरेटी के कोड के अपने अनुकूलन को साझा किया है । openFile(पहले पैरामीटर के रूप में फ़ाइल सामग्री के साथ निष्पादित होने के लिए फ़ंक्शन का उपयोग करें )।

function dispFile(contents) {
  document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
	// Thx user1601638 on Stack Overflow (6/6/2018 - /programming/13405129/javascript-create-and-save-file )
	var eventMouse = document.createEvent("MouseEvents")
	eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
	elem.dispatchEvent(eventMouse)
}
function openFile(func) {
	readFile = function(e) {
		var file = e.target.files[0];
		if (!file) {
			return;
		}
		var reader = new FileReader();
		reader.onload = function(e) {
			var contents = e.target.result;
			fileInput.func(contents)
			document.body.removeChild(fileInput)
		}
		reader.readAsText(file)
	}
	fileInput = document.createElement("input")
	fileInput.type='file'
	fileInput.style.display='none'
	fileInput.onchange=readFile
	fileInput.func=func
	document.body.appendChild(fileInput)
	clickElem(fileInput)
}

Click the button then choose a file to see its contents displayed below.
<button onclick="openFile(dispFile)">Open a file</button>
<pre id="contents"></pre>

Comments

धन्यवाद, मददगार था। हालांकि ध्यान दें कि आपके पास उस कोड के clickElem()बजाय आप केवल कॉल कर सकते हैं fileInput.click()। (कम से कम क्रोम के नवीनतम संस्करण में)

— वेनरिक्स

Answer 4

प्रयत्न

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

लेकिन उपयोगकर्ता को फ़ाइल चुनने के लिए कार्रवाई करने की आवश्यकता है

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

async function read(input) {
  msg.innerText = await readFile(input.files[0]);
}

<input type="file" onchange="read(this)"/>
<h3>Content:</h3><pre id="msg"></pre>

Comments

मैंने अभी msg.innerText को देखा और पहली बार मुझे पता चला कि ID के साथ पहचाने जाने वाले कुछ तत्वों को ID का उपयोग करके चर नाम या विंडो ऑब्जेक्ट के गुणों के रूप में एक्सेस किया जा सकता है।

— फेलिना

तो जवाब है कि हम नहीं कर सकते । HTML दस्तावेज़ों के आदान-प्रदान के लिए बहुत सही लगता है! लेकिन सब कुछ परोसा नहीं जा सकता। एक स्थानीय फ़ाइल का उपयोग अच्छा होता

— yota

@yota - सुरक्षा कारणों से संभवतः बातचीत करने के लिए उपयोगकर्ता बल (और जागरूक

— रहें)

Answer 5

Xmlhttp अनुरोध विधि स्थानीय डिस्क पर फ़ाइलों के लिए मान्य नहीं है क्योंकि ब्राउज़र सुरक्षा हमें ऐसा करने की अनुमति नहीं देती है। लेकिन हम शॉर्टकट बनाकर ब्राउज़र सुरक्षा को ओवरराइड कर सकते हैं-> राइट क्लिक-> गुण लक्ष्य में ... ब्राउज़र स्थान पाथ। exe "- append --allow-file-access-from-files.This क्रोम पर परीक्षण किया गया है, हालांकि ध्यान रखा जाना चाहिए कि सभी ब्राउज़र विंडो बंद होनी चाहिए और कोड को इस शॉर्टकट के माध्यम से खोले गए ब्राउज़र से चलाया जाना चाहिए।

Answer 6

आप नहीं कर सकते। नए ब्राउज़र जैसे फ़ायरफ़ॉक्स, सफारी आदि 'फ़ाइल' प्रोटोकॉल को ब्लॉक करते हैं। यह केवल पुराने ब्राउज़रों पर काम करेगा।

आपको अपनी इच्छित फाइलें अपलोड करनी होंगी।

Answer 7

जावास्क्रिप्ट आमतौर पर नए ब्राउज़रों में स्थानीय फ़ाइलों का उपयोग नहीं कर सकता है, लेकिन XMLHttpRequest ऑब्जेक्ट का उपयोग फ़ाइलों को पढ़ने के लिए किया जा सकता है। तो यह वास्तव में अजाक्स है (और जावास्क्रिप्ट नहीं) जो फ़ाइल पढ़ रहा है।

यदि आप फ़ाइल को पढ़ना चाहते हैं abc.txt, तो आप कोड इस प्रकार लिख सकते हैं:

var txt = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    txt = xmlhttp.responseText;
  }
};
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();

अब txtफ़ाइल abc.txt की सामग्री शामिल है।

Comments

अजाक्स जावास्क्रिप्ट है।

— मफिन मैन

@ द मफिनमैन और एक्सएमएल (एसिंक्रोनस जावास्क्रिप्ट और एक्सएमएल)

— क्विंटेक

यह उत्तर प्रासंगिक नहीं है क्योंकि ऑप ने क्लाइंट साइड पर रहने वाली फ़ाइलों को खोलने के लिए कहा है, न कि सर्वर पर रहने वाली फाइलें।

— थॉमस गुयेन

@ThomasNguyen, यह सवाल "जावास्क्रिप्ट ओपन फाइल" का पहला Google परिणाम है और फिर भी यह उत्तर लाभदायक है।

— नाथन गोइंग

@ThomasNguyen मैं सहमत हूं, लेकिन FileReader के बिना एक संभावित समाधान फ़ाइल को सर्वर पर अपलोड करने और इसे वहां से पढ़ने के लिए हो सकता है। फिर भी मैंने इस उत्तर को अस्वीकार कर दिया।

— inf3rno