Skip to content

Instantly share code, notes, and snippets.

@glynthomas

glynthomas/gist:9055235

Last active August 29, 2015 13:56
Show Gist options
  • Save glynthomas/9055235 to your computer and use it in GitHub Desktop.
Save glynthomas/9055235 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 File API thumbnail : div
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: FileReader API thumbnail : div</title>
<!-- <link rel="stylesheet" href="css/html5demos.css"> -->
<body>
<section id="wrapper">
<header>
<h1>HTML5 FileReader API thumbnail : div</h1>
</header>
<article>
<p id="status">File API & FileReader API are 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" style="height:100px; width:100px"></div>
</article>
<script>
document.getElementsByTagName('input')[0].onchange = function (event) {
event.preventDefault();
var _up = { 'upload': '', 'holder': '', 'state': '', 'file':'', 'reader':'', 'img':'', 'err': ''};
_up['upload'] = document.getElementsByTagName('input')[0];
_up['holder'] = document.getElementById('holder');
_up['state'] = document.getElementById('status');
_up['file'] = document.getElementsByTagName('input')[0].files[0];
_up['reader'] = new FileReader();
switch (true) {
case (typeof window.FileReader === 'undefined'):
_up['state'].className = 'fail';
return;
case (!_up['upload'].files[0].type.match('image.*')):
window.alert("Select image please");
return;
break;
}
_up['reader'].onload = function (event) {
_up['holder'] = document.getElementById('holder').innerHTML = "";
_up['holder'] = document.getElementById('holder');
console.log(event.total);
_up['img'] = document.createElement("img");
_up['img'].style.width = "100px";
_up['img'].style.height = "100px";
_up['img'].src = event.target.result;
switch (true) {
case (event.total > 130000):
console.log('your picture is too large')
return false;
break;
}
_up['holder'].appendChild(_up['img']);
};
_up['reader'].onprogress = function(event) {
// progressNode.max = event.total;
// progressNode.value = event.loaded;
// console.log(event.total);
};
_up['reader'].onloadend = function(event) {
// var contents = event.target.result,
_up['err'] = event.target.error;
if (_up['err'] != null) {
switch (_up['err'].code) {
case read_error.ENCODING_ERR:
console.error("Encoding error!");
break;
case _up['err'].NOT_FOUND_ERR:
console.error("File not found!");
break;
case _up['err'].NOT_READABLE_ERR:
console.error("File could not be read!");
break;
case _up['err'].SECURITY_ERR:
console.error("Security issue with file!");
break;
default:
console.error("I have no idea what's wrong!");
}
} else {
// progressNode.max = 1;
// progressNode.value = 1;
// console.log("Contents: " + contents);
// console.log(progressNode);
console.log('load end success')
}
};
_up['reader'].readAsDataURL(_up['file']);
_up = [];
return false;
};
</script>
<footer>
<a id="built" href="http://twitter.com/glynfoo">@glynfoo</a>... we can re-build this</footer>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment