Geek Answers Handbook

Javascript FileReader not loading

I have not used JavaScript after a while, and I cannot read a text file and display the contents.

I tried onload as well as onloadend . If I just put reader.onload = alert('Hello'); , a warning is triggered, but I cannot get something to work with this function.

Not exactly where to go from here. I tried to define the function after reader.onload = function(evt)... but this will not work.

I also tried in Safari 6.0.5 and Chrome.

 <!DOCTYPE HTML> <html> <head> <title>Pi to Colors</title> </head> <body> <script> function readFile() { var reader = new FileReader(); reader.onload = readSuccess; function readSuccess(evt) { var field = document.getElementById('main'); field.innerHTML = evt.target.result; }; reader.readAsText("/pi.txt"); } </script> <div id="main"> </div> </body> </html>
+7
javascript html5
source share
4 answers

You cannot capture a local file like this for security reasons.

Another problem is that readAsText (and all reading functions) need the contents of the file, not its path / file name. You can grab this from the file collection of the input type = "file" element. Here's how your code might work:

 function readFile(file) { var reader = new FileReader(); reader.onload = readSuccess; function readSuccess(evt) { var field = document.getElementById('main'); field.innerHTML = evt.target.result; }; reader.readAsText(file); } document.getElementById('selectedFile').onchange = function(e) { readFile(e.srcElement.files[0]); };

Here is jsfiddle: http://jsfiddle.net/fstreamz/ngXBV/1/

Note: this code does not work in Safari browser

+11
source share

you can use ajax to get the contents of your file:

 var reader= new XMLHttpRequest(); reader.open('GET', '/pi.txt'); reader.onreadystatechange =readSuccess(); function readSuccess(evt) { var field = document.getElementById('main'); field.innerHTML = reader.responseText; }; reader.send();
+1
source share

Nothing worked for me. You can find my ugly solution below, but that was the only one who did the job. In my case, the user can upload up to 3 files, so var iPDF can be 0,1,2.

  var iPDF=UpdatedExistingNumberOfPDFfiles; if (iPDF < NoMaxPDFfiles) { var reader = new FileReader(); reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]); reader.onload = function (){ var PDFdataURL = reader.result; var xhr = new XMLHttpRequest(); xhr.open("POST", "Observation_PDFUpload.php",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); var NumberOfPDFfile = iPDF+1; xhr.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile); iPDF++; if (iPDF < NoMaxPDFfiles) { reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]); reader.onload = function (){ PDFdataURL = reader.result; var xhr1 = new XMLHttpRequest(); xhr1.open("POST", "Observation_PDFUpload.php",true); xhr1.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); NumberOfPDFfile = iPDF+1; xhr1.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile); iPDF++; if (iPDF < NoMaxPDFfiles) { reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]); reader.onload = function (){ PDFdataURL = reader.result; var xhr2 = new XMLHttpRequest(); xhr2.open("POST", "Observation_PDFUpload.php",true); xhr2.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); NumberOfPDFfile = iPDF+1; xhr2.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile); } } } } } };
-one
source share

I have the same problem and I found a solution. You cannot read the local file if the user does not have permission. You can place <input type="file"> on your page. If you change the file input, you can read the data.

-one
source share

More articles:


All Articles