js 實現圖片預覽的兩種方式


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM