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>

 

posted @ 2018-11-07 15:46  追梦滴小蜗牛  阅读(16151)  评论(0)  编辑  收藏  举报