前端實現圖片上傳實時預覽

方法一：

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+='<input	type="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); 

效果截圖：