In Firefox 3 it is possible to access the contents of a <input type="file"> element as in the following.

Assume a form with the following element:

<input type="file" id="myinput">

Now the data of the file selected can be accessed with:

// Get the file's data as a data: URL
document.getElementById('myinput').files[0].getAsDataURL()

Is there a cross-browser way to acplish the same thing?

Firefox documentation for this feature:

In Firefox 3 it is possible to access the contents of a <input type="file"> element as in the following.

Assume a form with the following element:

<input type="file" id="myinput">

Now the data of the file selected can be accessed with:

// Get the file's data as a data: URL
document.getElementById('myinput').files[0].getAsDataURL()

Is there a cross-browser way to acplish the same thing?

Firefox documentation for this feature:

• https://developer.mozilla/en/nsIDOMFileList
• https://developer.mozilla/en/nsIDOMFile

• javascript
• cross-browser

• What are you trying to acplish? Image preview in browser or Ajax file uploads? – Ionuț G. Stan Commented Jun 2, 2009 at 22:05
• The current goal is to draw the image on a canvas. In the future, I think I might want to perform an upload through Ajax, though. – Doug Commented Jun 2, 2009 at 22:10
• You're pretty limited in that case. Ajax file uploads work in FF 3+, Safari 4+ and Chrome 2+, so you may have more luck in there. I, for one, don't know of any other way of importing image data inside a canvas. If you find one, please update this question. – Ionuț G. Stan Commented Jun 2, 2009 at 22:15
• this link was really helpful to me : html5rocks./en/tutorials/file/dndfiles – pmrotule Commented May 12, 2014 at 19:01

2 Answers 2

This is possible in at least Chrome, Firefox and Safari: Reading Files. see associated jsfiddle

function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }
    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
          document.getElementById('byte_content').textContent = _.reduce(evt.target.result, 
              function(sum, byte) {
                  return sum + ' 0x' + String(byte).charCodeAt(0).toString(16);
              }, '');
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob;
    if (file.slice) {
        blob = file.slice(start, stop + 1);
    }else if (file.webkitSlice) {
      blob = file.webkitSlice(start, stop + 1);
    } else if (file.mozSlice) {
      blob = file.mozSlice(start, stop + 1);
    }
    console.log('reader: ', reader);
    reader.readAsBinaryString(blob);
  }

  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);

In Firefox 19 (Released 2013-02-19) they added:

    window.URL.createObjectURL(
        document.getElementById('myinput').files[0]
    );