javascript - जावास्क्रिप्ट में पाठ फ़ाइल को कैसे पढ़ा जाए




html5 text (5)

मेरा उदाहरण

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>

मैं अपनी जावास्क्रिप्ट फ़ाइल में एक टेक्स्ट फ़ाइल लोड करने की कोशिश कर रहा हूं और फिर जानकारी प्राप्त करने के लिए उस फ़ाइल से लाइनों को पढ़ता हूं, और मैंने फ़ाइल रीडर की कोशिश की लेकिन यह काम नहीं कर रहा है। क्या कोई मदद कर सकता है?

function analyze(){
   var f = new FileReader();

   f.onloadend = function(){
       console.log("success");
   }
   f.readAsText("cities.txt");
}

सुरक्षा कारणों से जावास्क्रिप्ट को उपयोगकर्ता के फाइल सिस्टम तक पहुंच नहीं है। FileReader केवल उपयोगकर्ता द्वारा चुने गए फ़ाइलों के लिए है।


यह जावास्क्रिप्ट XMLHttpRequest () वर्ग (AJAX) का उपयोग करके आसानी से किया जा सकता है:

function FileHelper()

{
    FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom)
    {
        var request = new XMLHttpRequest();
        request.open("GET", pathOfFileToReadFrom, false);
        request.send(null);
        var returnValue = request.responseText;

        return returnValue;
    }
}

...

var text = FileHelper.readStringFromFileAtPath ( "mytext.txt" );

हाँ, FileReader के साथ यह संभव है, मैंने पहले ही इसका एक उदाहरण किया है, यहां कोड है:

<!DOCTYPE html>
<html>
  <head>
    <title>Read File (via User Input selection)</title>
    <script type="text/javascript">
    var reader; //GLOBAL File Reader object for demo purpose only

    /**
     * Check for the various File API support.
     */
    function checkFileAPI() {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            reader = new FileReader();
            return true; 
        } else {
            alert('The File APIs are not fully supported by your browser. Fallback required.');
            return false;
        }
    }

    /**
     * read text input
     */
    function readText(filePath) {
        var output = ""; //placeholder for text output
        if(filePath.files && filePath.files[0]) {           
            reader.onload = function (e) {
                output = e.target.result;
                displayContents(output);
            };//end onload()
            reader.readAsText(filePath.files[0]);
        }//end if html5 filelist support
        else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX
            try {
                reader = new ActiveXObject("Scripting.FileSystemObject");
                var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object
                output = file.ReadAll(); //text contents of file
                file.Close(); //close file "input stream"
                displayContents(output);
            } catch (e) {
                if (e.number == -2146827859) {
                    alert('Unable to access local files due to browser security settings. ' + 
                     'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' + 
                     'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"'); 
                }
            }       
        }
        else { //this is where you could fallback to Java Applet, Flash or similar
            return false;
        }       
        return true;
    }   

    /**
     * display content using a basic HTML replacement
     */
    function displayContents(txt) {
        var el = document.getElementById('main'); 
        el.innerHTML = txt; //display output in DOM
    }   
</script>
</head>
<body onload="checkFileAPI();">
    <div id="container">    
        <input type="file" onchange='readText(this)' />
        <br/>
        <hr/>   
        <h3>Contents of the Text file:</h3>
        <div id="main">
            ...
        </div>
    </div>
</body>
</html>

ActiveX ऑब्जेक्ट का उपयोग करके आईई के कुछ पुराने संस्करणों (मुझे लगता है कि 6-8) का समर्थन करने के लिए भी वही करना संभव है, मेरे पास कुछ पुराना कोड था जो यह भी करता है लेकिन यह थोड़ी देर हो गया है इसलिए मुझे इसे खोदना होगा मुझे जैकी कुई के ब्लॉग की सौजन्य का उपयोग करने के लिए एक समाधान मिला है और इस जवाब को संपादित किया है (कोड को थोड़ा साफ भी किया गया है)। आशा करता हूँ की ये काम करेगा।

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Read File (via AJAX)</title>
<script type="text/javascript">
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');

function loadFile() {
    reader.open('get', 'test.txt', true); 
    reader.onreadystatechange = displayContents;
    reader.send(null);
}

function displayContents() {
    if(reader.readyState==4) {
        var el = document.getElementById('main');
        el.innerHTML = reader.responseText;
    }
}

</script>
</head>
<body>
<div id="container">
    <input type="button" value="test.txt"  onclick="loadFile()" />
    <div id="main">
    </div>
</div>
</body>
</html>

चेतावनी का एक शब्द, आप सभी हार्ड-चार्जिंग प्रोग्रामर: मौजूदा कोड में "use strict" लागू करना खतरनाक हो सकता है! यह बात कुछ अच्छा, खुश चेहरा वाला स्टिकर नहीं है जिसे आप कोड को 'बेहतर' बनाने के लिए थप्पड़ मार सकते हैं। "use strict" प्रज्ञा के साथ, ब्राउजर अचानक यादृच्छिक स्थानों में अपवादों को छोड़ देगा जो कि इससे पहले कभी नहीं फेंक दिया क्योंकि उस स्थान पर आप कुछ ऐसा कर रहे हैं जो डिफ़ॉल्ट / ढीला जावास्क्रिप्ट खुशी से अनुमति देता है लेकिन सख्त जावास्क्रिप्ट abhors! आपके कोड में कभी-कभी उपयोग की जाने वाली कॉल में छिपाने के लिए सख्त उल्लंघन हो सकता है जो अंततः एक अपवाद फेंक देगा जब वे आखिरकार दौड़ते हैं - कहें, आपके भुगतान करने वाले ग्राहकों का उत्पादन वातावरण में!

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

मुझे लगता है कि यह एक घातक कैज्ड जानवर है, भले ही "use strict" अच्छी चीजें हो सकती है, लेकिन आपको इसे सही करना है। सख्त जाने का सबसे अच्छा समय यह है कि जब आपकी परियोजना ग्रीनफील्ड है और आप खरोंच से शुरू कर रहे हैं। JSHint/JSLint को सभी चेतावनियों और विकल्पों के साथ कॉन्फ़िगर करें, जैसे आपकी टीम पेट कर सकती है, Grunt+Karma+Chai जैसी कठोर बिल्ड / टेस्ट / जोर प्रणाली सिस्टम डू पत्र प्राप्त करें, और केवल तब ही अपने सभी नए मॉड्यूल को "use strict" । बहुत सारी त्रुटियों और चेतावनियों को ठीक करने के लिए तैयार रहें। JSHint/JSLint किसी भी उल्लंघन का उत्पादन करता है तो सुनिश्चित करें कि हर कोई विफल होने के निर्माण को कॉन्फ़िगर करके गुरुत्वाकर्षण को समझता है।

जब मैंने "use strict" अपनाया था तो मेरा प्रोजेक्ट ग्रीनफील्ड प्रोजेक्ट नहीं था। नतीजतन, मेरा आईडीई लाल अंकों से भरा है क्योंकि मेरे पास आधा मेरे मॉड्यूल पर "use strict" नहीं "use strict" , और जेएसहिंट इसके बारे में शिकायत करता है। यह मुझे एक अनुस्मारक है कि भविष्य में मुझे क्या करना चाहिए। मेरा लक्ष्य मेरे सभी लापता "use strict" कथन "use strict" बयान के कारण लाल निशान मुक्त होना है, लेकिन यह अब साल दूर है।





javascript html5 text