码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 上传图片预览

时间:2014-09-28 20:23:55      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:blog   io   ar   java   sp   div   问题   on   c   

html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览

html5出现之后   有个filereader 解决了这问题

 //选中图片之后
            $("#fileAddPic").on(‘change‘, function (e) {
                var files = e.target.files || e.dataTransfer.files;
                onSelect(files);
            })


 //选中图片之后
 function onSelect(file) {
            file = file[0];

            var html = ‘‘, i = 0;
            $("#preview").html(‘<div class="upload_loading"></div>‘);
            var funAppendImage = function () {
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#upimgBox").attr(‘src‘, e.target.result)
                    }
                    reader.readAsDataURL(file);
                }
            };
            funAppendImage();
        }

  

HTML5 上传图片预览

标签:blog   io   ar   java   sp   div   问题   on   c   

原文地址:http://www.cnblogs.com/sxmny/p/3998701.html

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