第一種方式:(使用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>