get the data of uploaded file in javascript

by

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) {
    let files = evt.target.files; // FileList object

    // use the 1st file from the list
    let f = files[0];
    
    let 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>

More Related Contents:

  1. Using HTML5 file uploads with AJAX and jQuery
  2. How to send data to the server via Ajax?
  3. HTML: how refresh information in [closed]
  4. Submit form without page reloading
  5. In what situations would AJAX long/short polling be preferred over HTML5 WebSockets?
  6. Upload multiple image using AJAX, PHP and jQuery
  7. Executing injected by innerHTML after AJAX call
  8. Changing CSS Values with Javascript
  9. Remember and Repopulate File Input [duplicate]
  10. How to resolve the C:\fakepath?
  11. Client Checking file size using HTML5?
  12. How to bind Events on Ajax loaded Content?
  13. Will HTML5 allow web apps to make peer-to-peer HTTP connections?
  14. How to upload a file using jQuery.ajax and FormData
  15. Want HTML form submit to do nothing
  16. Javascript regex returning true.. then false.. then true.. etc [duplicate]
  17. How do I abort image load requests without using window.stop()
  18. Using Javascript to override or disable meta refresh tag
  19. Ajax file upload
  20. How to generate a thumbnail image after adding an image inside an input type=”file” in a form and submitting them both on the same form
  21. Cross domain Ajax request from within js file
  22. How to change URL in browser without navigating away from page?
  23. Drag-and-drop file upload in Google Chrome/Chromium and Safari?
  24. jQuery DataTables “No Data Available in Table”
  25. How to make a button execute a php script?
  26. javascript: upload image file and draw it into a canvas
  27. How do I dynamically insert an SVG image into HTML?
  28. Cross-Origin resource sharing and file://
  29. jquery ajax parse response text
  30. how to get full path from fileupload using Javascript

Leave a Comment