Is it possible to have a fake file uploader in the sense that when the user "uploads" the file, instead of sending it to the server, some client-side Javascript will read the file, parse it into HTML, and then modify the DOM to display the parsed HTML on
a webpage, all without the server doing anything?
There is the new FileReader, part of the HTML 5 family but it’s support varies.
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
Support for the FileReader and File can be seen at:
Hi,
Check my blog post, it might be what u are after:
http://rajudasa.blogspot.in/2010/10/firefox-parsing-client-side-xml-file.html
Hi Faize,
Thanks for your post.
As for your problem, you could refer to the following link which describes about “read local file and display contents using javascript”.
Besides, I have tested the below sample code on my side, and I could read local text file and display contents in IE11. You could try it on you side.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta http-equiv='Content-type' content='text/html;charset=UTF-8'/> <script> function startRead() { // obtain input element through DOM var file = document.getElementById('file').files[0]; if (file) { getAsText(file); } } function getAsText(readFile) { var reader; try { reader = new FileReader(); } catch (e) { document.getElementById('output').innerHTML = "Error: seems File API is not supported on your browser"; return; } // Read file into memory as UTF-8 reader.readAsText(readFile, "UTF-8"); // Handle progress, success, and errors reader.onprogress = updateProgress; reader.onload = loaded; reader.onerror = errorHandler; } function updateProgress(evt) { if (evt.lengthComputable) { // evt.loaded and evt.total are ProgressEvent properties var loaded = (evt.loaded / evt.total); if (loaded < 1) { // Increase the prog bar length // style.width = (loaded * 200) + "px"; document.getElementById("bar").style.width = (loaded * 100) + "%"; } } } function loaded(evt) { // Obtain the read file data var fileString = evt.target.result; document.getElementById('output').innerHTML = fileString; document.getElementById("bar").style.width = 100 + "%"; } function errorHandler(evt) { if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) { // The file could not be read document.getElementById('output').innerHTML = "Error reading file..." } } </script> </head> <body> <form> <input id="file" type="file" onchange="startRead()" /> <h3>Progress:</h3> <div style="width: 100%; height: 20px; border: 1px solid black;"> <div id="bar" style="background-color: #45F; width: 0px; height: 20px;"></div> </div> <h3>File contents:</h3> <pre> <code id="output"> </code> </pre> </form> </body> </html>
Hope it will be helpful to you.
Best Regards,
Fei Han