विभिन्न ब्राउज़रों में जावास्क्रिप्ट में क्लाइंट-साइड पर फ़ाइल सामग्री पढ़ना

Question

मैं ब्राउज़र के माध्यम से क्लाइंट मशीन पर किसी फ़ाइल की सामग्री को पढ़ने के लिए स्क्रिप्ट-केवल समाधान प्रदान करने का प्रयास कर रहा हूं।

मेरे पास एक समाधान है जो फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर के साथ काम करता है। यह बहुत नहीं है, लेकिन मैं केवल इस समय चीजें कोशिश कर रहा हूँ:

function getFileContents() { 
    var fileForUpload = document.forms[0].fileForUpload; 
    var fileName = fileForUpload.value; 

    if (fileForUpload.files) { 
     var fileContents = fileForUpload.files.item(0).getAsBinary(); 
     document.forms[0].fileContents.innerHTML = fileContents; 
    } else { 
     // try the IE method 
     var fileContents = ieReadFile(fileName); 
     document.forms[0].fileContents.innerHTML = fileContents; 
    } 
}  

function ieReadFile(filename) 
{ 
    try 
    { 
     var fso = new ActiveXObject("Scripting.FileSystemObject"); 
     var fh = fso.OpenTextFile(filename, 1); 
     var contents = fh.ReadAll(); 
     fh.Close(); 
     return contents; 
    } 
    catch (Exception) 
    { 
     return "Cannot open file :("; 
    } 
} 

मैं getFileContents() कॉल कर सकते हैं और यह fileContents पाठ क्षेत्र में सामग्री लिखेंगे।

क्या अन्य ब्राउज़रों में ऐसा करने का कोई तरीका है?

मैं फिलहाल सफारी और क्रोम से अधिक चिंतित हूं, लेकिन मैं किसी अन्य ब्राउज़र के लिए सुझावों के लिए खुला हूं।

संपादित करें: सवाल है, "क्यों आप ऐसा करना चाहते हो?" के जवाब में:

असल में, मैं ग्राहक की ओर एक एक समय पासवर्ड के साथ फ़ाइल सामग्री हैश करने के लिए चाहते हैं इसलिए मैं इस जानकारी को एक सत्यापन के रूप में वापस भेज सकता हूं।

Answer 1

फ़ाइल एपीआई

के बारे में जानकारी जोड़ने के लिए जब से मैं मूल रूप से इस जवाब लिखा संपादित, File API (एक मानक और implemented in most browsers के रूप में प्रस्तावित किया गया है आईई 10, जो FileReader एपीआई के लिए समर्थन यहाँ वर्णित जोड़ा के रूप में, हालांकि अभी तक File एपीआई नहीं है)। एपीआई पुराने मोज़िला एपीआई की तुलना में थोड़ा अधिक जटिल है, क्योंकि इसे फाइलों के एसिंक्रोनस रीडिंग, बाइनरी फाइलों के लिए बेहतर समर्थन और विभिन्न टेक्स्ट एन्कोडिंग के डीकोडिंग का समर्थन करने के लिए डिज़ाइन किया गया है। some documentation available on the Mozilla Developer Network के साथ-साथ various examples online भी है। इस प्रकार आप इसे प्रयोग करेंगे:

var file = document.getElementById("fileForUpload").files[0]; 
if (file) { 
    var reader = new FileReader(); 
    reader.readAsText(file, "UTF-8"); 
    reader.onload = function (evt) { 
     document.getElementById("fileContents").innerHTML = evt.target.result; 
    } 
    reader.onerror = function (evt) { 
     document.getElementById("fileContents").innerHTML = "error reading file"; 
    } 
} 

मूल जवाब

वहाँ वेबकिट (इस प्रकार, सफारी और क्रोम) में यह करने के लिए एक तरीका हो प्रतीत नहीं होता है। एकमात्र कुंजी जो File ऑब्जेक्ट fileName और fileSize हैं। फ़ाइल और फ़ाइललिस्ट समर्थन के लिए commit message के अनुसार, ये Mozilla's File object से प्रेरित हैं, लेकिन वे केवल सुविधाओं के एक सबसेट का समर्थन करने लगते हैं।

यदि आप इसे बदलना चाहते हैं, तो आप वेबकिट प्रोजेक्ट में हमेशा send a patch कर सकते हैं। एक और संभावना मोज़िला एपीआई को HTML 5 में शामिल करने के लिए प्रस्तावित करना होगा; WHATWG मेलिंग सूची शायद ऐसा करने के लिए सबसे अच्छी जगह है। यदि आप ऐसा करते हैं, तो यह अधिक संभावना है कि कम से कम कुछ वर्षों में ऐसा करने के लिए एक क्रॉस-ब्राउज़र तरीका होगा। बेशक, या तो पैच या एचटीएमएल 5 को शामिल करने के प्रस्ताव को प्रस्तुत करने का मतलब है कि कुछ काम इस विचार का बचाव करते हैं, लेकिन तथ्य यह है कि फ़ायरफ़ॉक्स पहले से ही लागू करता है, यह आपको कुछ शुरू करने देता है।

Answer 2

हैप्पी कोडिंग!
अगर आप इंटरनेट एक्सप्लोरर पर एक त्रुटि मिलती है, ActiveX

var CallBackFunction = function(content) 
{ 
    alert(content); 
} 
ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction); 

//Tested in Mozilla Firefox browser, Chrome 
function ReadFileAllBrowsers(FileElement, CallBackFunction) 
{ 
try 
{ 
    var file = FileElement.files[0]; 
    var contents_ = ""; 

    if (file) { 
     var reader = new FileReader(); 
     reader.readAsText(file, "UTF-8"); 
     reader.onload = function(evt) 
     { 
      CallBackFunction(evt.target.result); 
     } 
     reader.onerror = function (evt) { 
      alert("Error reading file"); 
     } 
    } 
} 
catch (Exception) 
{ 
    var fall_back = ieReadFile(FileElement.value); 
    if(fall_back != false) 
    { 
     CallBackFunction(fall_back); 
    } 
} 
} 

///Reading files with Internet Explorer 
function ieReadFile(filename) 
{ 
try 
{ 
    var fso = new ActiveXObject("Scripting.FileSystemObject"); 
    var fh = fso.OpenTextFile(filename, 1); 
    var contents = fh.ReadAll(); 
    fh.Close(); 
    return contents; 
} 
catch (Exception) 
    { 
    alert(Exception); 
    return false; 
    } 
} 

Answer 3

अनुमति देने के लिए आदेश में एक फ़ाइल उपयोगकर्ता द्वारा चुना पढ़ने के लिए, एक फ़ाइल खोलें डायलॉग का उपयोग कर सुरक्षा सेटिंग बदलना, आप <input type="file"> टैग का उपयोग कर सकते हैं। आप information on it from MSDN पा सकते हैं।जब फ़ाइल चुनी जाती है तो आप सामग्री को पढ़ने के लिए FileReader API का उपयोग कर सकते हैं।

function onFileLoad(elementId, event) { 
 
    document.getElementById(elementId).innerText = event.target.result; 
 
} 
 

 
function onChooseFile(event, onLoadFileHandler) { 
 
    if (typeof window.FileReader !== 'function') 
 
     throw ("The file API isn't supported on this browser."); 
 
    let input = event.target; 
 
    if (!input) 
 
     throw ("The browser does not properly implement the event object"); 
 
    if (!input.files) 
 
     throw ("This browser does not support the `files` property of the file input."); 
 
    if (!input.files[0]) 
 
     return undefined; 
 
    let file = input.files[0]; 
 
    let fr = new FileReader(); 
 
    fr.onload = onLoadFileHandler; 
 
    fr.readAsText(file); 
 
}

<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' /> 
 
<p id="contents"></p>