<!DOCTYPE html>
<html>
<head>
<title>File API Example</title>
<script src="EventUtil.js"></script>
</head>
<body>
<p>Select a file below.</p>
<input type="file" id="files-list">
<script>
window.onload = function () {
var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function (event) {
var info = "",
output = document.getElementById("output"),
progress = document.getElementById("progress"),
files = EventUtil.getTarget(event).files,
type = "default",
reader = new FileReader();
if (/image/.test(files[0].type)) {
reader.readAsDataURL(files[0]);
type = "image";
} else {
reader.readAsText(files[0]);
type = "text";
}
reader.onerror = function () {
output.innerHTML = "Could not read file, error code is " + reader.error.code;
};
reader.onprogress = function (event) {
if (event.lengthComputable) {
progress.innerHTML = event.loaded + "/" + event.total;
}
};
reader.onload = function () {
var html = "";
switch (type) {
case "image":
html = '<img src="' + reader.result + '" width="300px" height="300px">';
break;
case "text":
html = reader.result;
break;
}
output.innerHTML = html;
};
});
};
</script>
<div id="progress"></div>
<pre id="output"></pre>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>File API Example</title>
<script src="EventUtil.js"></script>
</head>
<body>
<input type="file" id="files-list">
<script>
function createObjectURL(blob){
if (window.URL){
return window.URL.createObjectURL(blob);
} else if (window.webkitURL){
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}
window.onload = function(){
var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
var info = "",
output = document.getElementById("output"),
progress = document.getElementById("progress"),
files = EventUtil.getTarget(event).files,
reader = new FileReader(),
url = createObjectURL(files[0]);
if (url){
if (/image/.test(files[0].type)){
output.innerHTML = "<img src=\"" + url + "\">";
} else {
output.innerHTML = "Not an image.";
}
} else {
output.innerHTML = "Your browser doesn't support object URLs.";
}
});
};
</script>
<pre id="output"></pre>
</body>
</html>
