Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
40 lines (35 sloc) 1.07 KB
<title>File API (simple)</title>
<article>
<p id="status">File API &amp; FileReader API not supported</p>
<p><input type=file></p>
<p>Select an image from your machine to read the contents of the file without using a server</p>
<div id="holder"></div>
</article>
<script>
var upload = document.getElementsByTagName('input')[0],
holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
upload.onchange = function (e) {
e.preventDefault();
var file = upload.files[0],
reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.src = event.target.result;
// note: no onload required since we've got the dataurl...I think! :)
if (img.width > 560) { // holder width
img.width = 560;
}
holder.innerHTML = '';
holder.appendChild(img);
};
reader.readAsDataURL(file);
return false;
};
</script>