Reading file contents on the client-side in javascript in various browsers

by

Edited to add information about the File API

Since I originally wrote this answer, the File API has been proposed as a standard and implemented in most browsers (as of IE 10, which added support for FileReader API described here, though not yet the File API). The API is a bit more complicated than the older Mozilla API, as it is designed to support asynchronous reading of files, better support for binary files and decoding of different text encodings. There is some documentation available on the Mozilla Developer Network as well as various examples online. You would use it as follows:

var file = document.getElementById("fileForUpload").files[0];
if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
        document.getElementById("fileContents").innerHTML = evt.target.result;
    }
    reader.onerror = function (evt) {
        document.getElementById("fileContents").innerHTML = "error reading file";
    }
}

Original answer

There does not appear to be a way to do this in WebKit (thus, Safari and Chrome). The only keys that a File object has are fileName and fileSize. According to the commit message for the File and FileList support, these are inspired by Mozilla’s File object, but they appear to support only a subset of the features.

If you would like to change this, you could always send a patch to the WebKit project. Another possibility would be to propose the Mozilla API for inclusion in HTML 5; the WHATWG mailing list is probably the best place to do that. If you do that, then it is much more likely that there will be a cross-browser way to do this, at least in a couple years time. Of course, submitting either a patch or a proposal for inclusion to HTML 5 does mean some work defending the idea, but the fact that Firefox already implements it gives you something to start with.

More Related Contents:

  1. Clearing using jQuery
  2. How to style “input file” with CSS3 / Javascript? [duplicate]
  3. HTML input type=file, get the image before submitting the form
  4. How to display selected image without sending data to server?
  5. Uncaught ReferenceError: $ is not defined error in jQuery
  6. Writing data to a local text file with javascript
  7. .val() don't edit input
  8. jquery get id of input selected text
  9. How to correctly iterate through getElementsByClassName
  10. Appending HTML string to the DOM
  11. Return HTML content as a string, given URL. Javascript Function
  12. Javascript Confirm popup Yes, No button instead of OK and Cancel
  13. Set custom HTML5 required field validation message
  14. Sound effects in JavaScript / HTML5
  15. How do I detect “shift+enter” and generate a new line in Textarea?
  16. HTML5 Local Storage fallback solutions [closed]
  17. How to get value of a div using javascript
  18. jQuery $(“#radioButton”).change(…) not firing during de-selection
  19. AngularJS: Better way to watch for height change
  20. Why don’t audio and video events bubble?
  21. HTML5 Audio tag on Safari has a delay
  22. How can I add “href” attribute to a link dynamically using JavaScript?
  23. Good Reasons why not to use Iframes in page content [closed]
  24. In AngularJS, any inline javascript code that included in HTML templates doesn’t work
  25. Is it possible to add html inside a title attribute?
  26. How to set custom validation messages for HTML forms?
  27. Trigger standard HTML validation (form) without using submit button? [duplicate]
  28. Replacing Entire Page Including Head Using Javascript
  29. form with no action and where enter does not reload page
  30. Decode HTML entity in Angular JS

Leave a Comment