码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript使用html5 fileReader来预览本地图片

时间:2016-08-21 16:52:48      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:

以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的。
如果想查看本地图片但不使用服务端的上传功能,可以使用html5的fileReader实现。
(IE10以下的浏览器不支持这个功能)

 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>html5 fileReader</title>
</head>
<style type="text/css">
    *{margin: 0;padding: 0;}
    input{margin: 20px 0 10px 20px;}
    .preview{margin-left: 20px;width: 300px;height: 300px;border: 1px solid #ccc;overflow: hidden;}
    .preview img{width: 100%;height: 100%;}
</style>
<body>
    <input type="file"/>
    <div class="preview"></div>
</body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    function dataURLPreview(file) {
        var img = new Image(),
            url = img.src = URL.createObjectURL(file);
        img.onload = function() {
            URL.revokeObjectURL(url);
            $(.preview).empty().append($(img));
        };
    }
  
    $(input[type=file]).change(function(e) {
        var file = e.target.files[0];
        dataURLPreview(file);
    });
</script>
</html>

 

JavaScript使用html5 fileReader来预览本地图片

标签:

原文地址:http://www.cnblogs.com/happyfreelife/p/5379263.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!