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

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पाठ क्षेत्र में लिख देगा ।

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

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

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

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

Comments

ऐसा नहीं है कि मेरे पास एक उत्तर है, लेकिन सिर्फ स्पष्टता के लिए, क्या आपको फ़ाइल का स्थान जानने की आवश्यकता है? यदि नहीं, तो क्या फ़ाइल के स्थान को फ़ाइल इनपुट से पढ़ा जाना चाहिए या क्या यह एक टेक्स्टबॉक्स / टेक्सटेरिया / जो कुछ भी हो सकता है?

— Darko Z

अच्छा प्रश्न। नहीं, मुझे वास्तव में परवाह नहीं है कि फ़ाइल कहाँ से आती है, केवल इसकी सामग्री। एक फ़ाइल इनपुट का उपयोग करना मेरे लिए समझदार लगता है, क्योंकि यह देशी html है - एक कम चीज है जो मुझे करनी है।

— दामोविसा

आप ऐसा क्यों करना चाहते हैं? सर्वर ऐसा करने के लिए है।

— जियोवा ४

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

— दामोविसा

Answer 1

फ़ाइल एपीआई के बारे में जानकारी जोड़ने के लिए संपादित किया गया

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

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";
    }
}

मूल उत्तर

WebKit (इस प्रकार, सफारी और क्रोम) में ऐसा करने का कोई तरीका प्रतीत नहीं होता है। फ़ाइल कुंजियाँ केवल कुंजी हैं fileNameऔर fileSize। फ़ाइल और फ़ाइललिस्ट समर्थन के लिए प्रतिबद्ध संदेश के अनुसार , ये मोज़िला की फ़ाइल ऑब्जेक्ट से प्रेरित हैं , लेकिन वे केवल सुविधाओं के सबसेट का समर्थन करते दिखाई देते हैं।

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

Comments

इसके लिए धन्यवाद - मुझे नहीं लगता कि मैं इस समय एक पैच प्रस्तुत करने के लिए पर्याप्त समर्पित हूं। यह कुछ ऐसा है जो आप अपने ज्ञान के बिना वैसे भी नहीं चाहते होंगे। यह थोड़े समय के लिए

— सैंड

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

— ब्रायन कैंपबेल

Mm, वास्तव में यह एक उचित बिंदु है। उस फ़ाइल को चुनने के लिए उपयोगकर्ता का इंटरैक्शन था। धन्यवाद।

— दामोविसा

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

— ब्रायन कैंपबेल

बहुत बढ़िया, इसके लिए धन्यवाद। मैं दूसरे काम पर चला गया, लेकिन इसका जवाब जानना अच्छा है :)

— दामोविसा

Answer 2

उपयोगकर्ता द्वारा चुनी गई फ़ाइल को पढ़ने के लिए, फ़ाइल खुले संवाद का उपयोग करके, आप <input type="file">टैग का उपयोग कर सकते हैं । आप 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>

Comments

Internet Explorer में काम नहीं कर रहा है।

— मेरविस मुफाक

Answer 3

हैप्पी कोडिंग!
यदि आपको Internet Explorer पर कोई त्रुटि मिलती है, तो 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;
  }
 }

Comments

एक्सेप्टिव एक्स अब (शुक्र है) मृत है

— लियाम