All geek questions in one place

Reading a text file using FileReader

I wrote the following code in an attempt to read the contents of a .txt file

<!DOCTYPE html> <html> <input type="file" id="files" name="file" /> <div id="container" style="height: 500px; min-width: 500px"></div> <script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { var reader = new FileReader(); reader.onload = (function(theFile) { var contents = theFile.target.result; var lines = contents.split('\n'); })(f); reader.readAsText(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script> </html>

Using firebug, I set break to var contents = theFile.target.result; but nothing returns. Can anyone determine what is wrong?

thanks

+6
source share
2 answers

Try (load with closing):

 function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { var reader = new FileReader(); reader.onload = (function(reader) { return function() { var contents = reader.result; var lines = contents.split('\n'); ////// document.getElementById('container').innerHTML=contents; } })(reader); reader.readAsText(f); } }

Or (without closing):

 function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { var reader = new FileReader(); reader.onload = function(event) { // NOTE: event.target point to FileReader var contents = event.target.result; var lines = contents.split('\n'); ////// document.getElementById('container').innerHTML=contents; }; reader.readAsText(f); } }
+9
source

my example

 <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>
0
source

Source: https://habr.com/ru/post/925135/

More articles:


All Articles