HTML5 APIs - HTML5 Advertising - page 126

<div id="drop_zone">Drop Zone</div>
<p>Select an image from your machine or drop onto the drop zone to read the contents of the
file without using a server</p>
<script>
function adInit(event) {
event.preventDefault();
var upload = document.getElementsByTagName('input')[0];
var progress = document.querySelector('.percent');
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('drop', handleFileSelect, false);
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
var reader = new FileReader();
console.log('Sweet! All File APIs supported');
upload.onchange = function (event) {
var file = upload.files[0];
var img = new Image();
reader.onload = function (event) {
console.log(event.type);
};
reader.onprogress = function (event) {
console.log(event.type);
var percentLoaded = Math.round((event.loaded / event.total) * 100);
progress.textContent = percentLoaded + '%';
console.log(percentLoaded)
};
reader.onloadend = function (event) {
if (!file.type.match('image.*')) {
alert("Not an image!!");
} else {
img.src = event.target.result;
if (img.width >= 300) {
img.width = 300;
}
}
console.log(event.type);
dropZone.innerHTML = '';
dropZone.appendChild(img);
};
reader.onerror = function (event) {
console.log(event.type);
};
reader.readAsDataURL(file);
console.log(reader);
return false;
};
function handleFileSelect(event) {
event.stopPropagation();
event.preventDefault();