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 accomplish the same thing?
Firefox documentation for this feature:
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] ); 