前端实现图片上传实时预览的两种方式

来源：互联网发布：淘宝修改密码编辑：程序博客网时间：2024/05/16 14:38

前端实现图片上传实时预览

方法一：

Html代码:

<div class="dv_info_box"><div class="dv_pic_box">        </div><button class="btn_add_pic">添加图片</button></div>

Css样式：

.dv_pic_item{    width: 200px;    height: 260px;    margin: 5px 5px;    float: left;}.btn_add_pic{    width: 80px;    height: 30px;    border-radius: 6px;    outline: none;    border: none;    background-color: #00BCD4;    color: #fff;    cursor: pointer;    margin-top: 20px;    margin-bottom: 20px;}.input_file_style{    width: 200px;    height: 20px;}.img_style{    width: 200px;    height: 240px;    display: block;    background-size: 100% auto;}

Js代码：

var btnCount=0;function initClickListener(){    $(".btn_add_pic").click(function(){        btnCount++;        var t='<div class="dv_pic_item">';        t+='<img src="" alt="" class="img_style" id="img_'+btnCount+'"/>';        t+='<inputtype="file"class="input_file_style"value="img_'+btnCount+'" id="file_'+btnCount+'"/>';        t+='</div>';        $(".dv_pic_box").append(t);        $(".input_file_style").change(function(e){            console.log($(this).attr("id"));            var img=document.getElementById($(this).attr("value"));            var obj=document.getElementById($(this).attr("id"));            if(obj && obj[0]){            img.src = window.URL.createObjectURL(obj.files[0]);            }else{            obj.select();            //ie9以上版本需加上blur            obj.blur();                var imgSrc = document.selection.createRange().text;                //图片异常的捕捉，防止用户修改后缀来伪造图片                try{                    img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";                    img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;                }                catch(e)                {                    alert("上传的图片格式不正确，请重新选择");                    return false;                }                document.selection.empty();            }        });    });

方法二：

利用FileReader对象，将input中的file对象，以base64转码的形式读取出来

                var reader = new FileReader();             reader.onloadend = function () {                     bitMap=this.result;                }                  reader.readAsDataURL(File);

其中bitMap获取到的数据为图片经过base64转码后的结果，可以设置到img标签的src属性里，如 '<img src=" '+bitmap+' "/>'

效果截图：

1 0