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

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

方法一：

Html代码:

	



        
	添加图片

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='
';
        t+='';
        t+='';
        t+='
';
        $(".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属性里，如 ''

效果截图：