js 实现图片预览的两种方式

最新推荐文章于 2024-06-25 13:13:22 发布

dei5960

最新推荐文章于 2024-06-25 13:13:22 发布

阅读量1.1k

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/oukele/p/9922940.html

版权

第一种方式：（使用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>

转载于:https://www.cnblogs.com/oukele/p/9922940.html

dei5960

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现图片预览的两种方式

第一种方式：（使用bloburl）格式为:　　blob:http://localhost:8080/9d1c3f82-90ff-4891-a1a3-9cb9a9782899　　blob:http://localhost:端口号/浏览器随机生成的字符代码：<%@ page contentType="text/html;charset=UTF-8" langu...
复制链接

扫一扫