get the data of uploaded file in javascript

javascript html ajax file-upload

The example below is based on the html5rocks solution. It uses the browser's FileReader() function. Newer browsers only.

See http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

In this example, the user selects an HTML file. It is displayed in the <textarea>.

<form enctype="multipart/form-data"><input id="upload" type=file   accept="text/html" name="files[]" size=30></form><textarea class="form-control" rows=35 cols=120 id="ms_word_filtered_html"></textarea><script>function handleFileSelect(evt) {    var files = evt.target.files; // FileList object    // use the 1st file from the list    f = files[0];        var reader = new FileReader();    // Closure to capture the file information.    reader.onload = (function(theFile) {        return function(e) {                    jQuery( '#ms_word_filtered_html' ).val( e.target.result );        };      })(f);      // Read in the image file as a data URL.      reader.readAsText(f);  }  document.getElementById('upload').addEventListener('change', handleFileSelect, false);</script>

javascript html ajax file-upload

you can use the new HTML 5 file api to read file contents

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

but this won't work on every browser so you probably need a server side fallback.

javascript html ajax file-upload

The example below shows the basic usage of the FileReader to read the contents of an uploaded file. Here is a working Plunker of this example.

function init() {  document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);}function handleFileSelect(event) {  const reader = new FileReader()  reader.onload = handleFileLoad;  reader.readAsText(event.target.files[0])}function handleFileLoad(event) {  console.log(event);  document.getElementById('fileContent').textContent = event.target.result;}

<!DOCTYPE html><html><head>  <script src="script.js"></script></head><body onload="init()">  <input id="fileInput" type="file" name="file" />  <pre id="fileContent"></pre></body></html>

Expand snippet