| <input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview..."> |
| function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } } |
4.readAsText(Boob,encoding):读取指定的Blob，如一个File对象（File对象是一种特殊的Blob）。只要读取完成，readyState属性的值就会变为2，result属性是一个表示文件数据的文本字符串。第二个参数是可选的，它用于指定result属性中文本字符串的编码方式，默认为UTF-8。
FileReader对象的事件
1.abort：终止读取操作时触发。
2.error：读取操作过程中遇到错误时触发。
3.load：读取操作成功的完成时触发。
4.loadend：读取操作结束时触发。不能是读取成功还是读取失败。
5.loadStart：读取操作开始时触发。
6.process：读取过程中触发。
在web应用中使用文件
使用HTML5中的文件对象，可以访问选择的本地文件，并且读取这些文件中的内容。文件对象要么来自于input元素，要么来自于drag and drop接口。
通过input元素选择文件
| <input type="file" id="input"> |
访问通过input选择的文件
| var selectedFile = document.getElementById('input').files[0]; |
上述代码段一次只能选择一个文件，如果一次要选择多个文件，就需要给input元素添加一个multiple属性，并将multiple属性设置我true。在Gecko 1.9.2之前不支持一次选择多个文件。
通过drag and drop接口选择文件
关于drag and drop接口可以查看HTML5 DragEvent。
第一步：创建一个放置区域。一个普通的元素，如div，p等。
第二步：给放置区添加drop，dragenter，dragover事件处理程序。其中起关键作用的是drop事件处理程序。
下面是一个显示缩略图的例子：
| <div id='dropbox' class='dropbox'></div> .dropbox{ border:solid 3px red; height:400px; width:auto; } |
| var dropbox; dropbox = document.getElementById("dropbox"); //注册事件处理程序 dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /^image//; if (!imageType.test(file.type)) { continue; } var img = document.createElement("img"); img.file = file; dropBox.appendChild(img); var reader = new FileReader(); reader.onload = function() { img.src = reader.result; }; reader.readAsDataURL(file); } } |
