首页 > Web开发 > 详细

HTML5 上传图片预览

时间:2014-09-28 19:15:06      阅读:208      评论:0      收藏:0      [点我收藏+]

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 上传图片预览

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!