第一种方式：（使用bloburl）
格式为:
blob:http://localhost:8080/9d1c3f82-90ff-4891-a1a3-9cb9a9782899
blob:http://localhost:端口号/浏览器随机生成的字符
代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <hr/> <br/> <input type="file" id="myFile1"/> <img src="" id="preview_img" width="400px" height="400px" alt=""> <script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script> <script> $("#myFile1").change(function () { //创建blob对象，浏览器将文件放入内存中，并生成标识 var img_src = URL.createObjectURL($(this)[0].files[0]); //给img标检的src赋值 document.getElementById("preview_img").src=img_src; //URL.revokeObjectURL(img_src);// 手动 回收， }); </script> </body> </html>
第二种方式：（使用dataurl）比较消耗性能
格式为:
data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==
data:文件类型;编码类型,进行转译的字符
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <hr/> <br/> <input type="file" id="myFile1"/> <img src="" id="preview_img" width="400px" height="400px" alt=""> <script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script> <script> $("#myFile1").change(function () { var fileReader = new FileReader(); fileReader.readAsDataURL($(this)[0].files[0]); //异步加载 fileReader.onload =function (event) { $("#preview_img").attr("src",event.target.result); } }); // $("#myFile1").change(function () { // //创建blob对象，浏览器将文件放入内存中，并生成标识 // var img_src = URL.createObjectURL($(this)[0].files[0]); // //给img标检的src赋值 // $("#preview_img").attr("src",img_src); // //URL.revokeObjectURL(img_src);// 手动 回收， // }); </script> </body> </html>
