HTML5 APIs - HTML5 Advertising - page 127

//event.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
var files = event.dataTransfer.files; // FileList object.
var file = files[0];
reader.onloadend = function (event) {
console.log(event.target);
dropZone.style.width = "300px";
dropZone.style.height = "300px";
dropZone.style.background = 'url(' + event.target.result + ')
no-repeat center';
};
reader.readAsDataURL(file);
return false;
console.log(file)
}
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
As this code shows, users are first allowed to select image files on their local machine or drag images onto an
ad's drop zone by defining an area in the markup as drop_zone . Once the ad initiates after the DOM is loaded, the
adInit function is fired; it kicks things off by grabbing a variable reference to the DOM objects. (You can see I'm using
various ways of getting a reference by calling getElementsByTagName , getElementById , and the new querySelector .)
Once the user drags-and-drops an image onto the drop area, we run through a few methods after creating a file
reader reference, first called upload.onchange , which handles grabbing the user's image file once the input element
changes state. Second, we use the file reader—let's call it reader —and attach specific methods to the object— onload ,
onprogress , onloadend , onerror and readAsDataURL —all of which handle specific commands when the user drops
the image on the drop area. Last, let's focus on the onloadend method, which writes the user's image into the drop_
zone element via CSS by writing dropZone.style.background = 'url(' + event.target.result + ') no-repeat
center'; . Once this occurs, the image is presented in the browser without a round trip to a server. This is shown in
Figure 6-2 using an example image from my desktop.