HTML-5 File APIs

HTML5 finally provides a standard way to interact with local files, via the File API.The File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline. Additionally, you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload.

Select an image from your machine to read the contents of the file without using a server.


Code for FILE API:

  <style>

  .thumb {

    height: 75px;

    border: 1px solid #000;

    margin: 10px 5px 0 0;

  }

</style>

<input type="file" id="files" name="files[]" multiple />

<output id="list"></output>

<script>

  function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.

    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.

      if (!f.type.match('image.*')) {

        continue;

      }

      var reader = new FileReader();

      // Closure to capture the file information.

      reader.onload = (function(theFile) {

        return function(e) {

          // Render thumbnail.

          var span = document.createElement('span');

          span.innerHTML = ['<img class="thumb" src="', e.target.result,

                            '" title="', escape(theFile.name), '"/>'].join('');

          document.getElementById('list').insertBefore(span, null);

        };

      })(f);

      // Read in the image file as a data URL.

      reader.readAsDataURL(f);

    }

  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script>

View Demo