方法一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>show_image_single</title> </head> <body> <input type="file" onchange="previewFile()" id="ipt"/><br /> <img src="" height="200" alt="Image preview..." id="oImg" /> <script type="text/javascript"> function previewFile() { var oImg = document.getElementById('oImg'); var file = document.getElementById('ipt').files[0]; var reader = new FileReader(); reader.addEventListener('load', function() { oImg.src = this.result; }, false); if (file) { reader.readAsDataURL(file); } } </script> </body> </html>
该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
读取多个文件的例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" id="oFile" onchange="previewFiles()" multiple="multiple" /> <div id="preview"></div> <script type="text/javascript"> function previewFiles() { var preview = document.getElementById('preview'); var files = document.getElementById('oFile').files; function readAndPreview(file) { // 确保file.name符合我们要求的拓展名 if(/.(jpe?g|png|gif)$/i.test(file.name)) { var reader = new FileReader(); reader.addEventListener("load", function () { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendChild(image); }, false); reader.readAsDataURL(file); } } if(files) { [].forEach.call(files, readAndPreview); } } </script> </body> </html>
链接：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
方法二:
使用对象URL来显示图像：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a> <div id="fileList"> <p>No files selected!</p> </div> <script> window.URL = window.URL || window.webkitURL; var fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"), fileList = document.getElementById("fileList"); fileSelect.addEventListener("click", function (e) { if (fileElem) { fileElem.click(); } e.preventDefault(); // prevent navigation to "#" }, false); function handleFiles(files) { if (!files.length) { fileList.innerHTML = "<p>No files selected!</p>"; } else { fileList.innerHTML = ""; var list = document.createElement("ul"); fileList.appendChild(list); for (var i = 0; i < files.length; i++) { var li = document.createElement("li"); list.appendChild(li); var img = document.createElement("img"); img.src = window.URL.createObjectURL(files[i]); img.height = 60; img.onload = function() { window.URL.revokeObjectURL(this.src); }; li.appendChild(img); var info = document.createElement("span"); info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; li.appendChild(info); } } } </script> </body> </html>
链接：https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications