[RESOLVED]Javascript file handling?

Api, HTML, Post, Table, UpdateProgress, Upload, Web Forms, Xml, , , , , , ,

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:

http://caniuse.com/#feat=filereader

http://caniuse.com/#feat=fileapi

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

Leave a Reply