前端實現圖片上傳實時預覽的兩種方式
阿新 • • 發佈:2019-02-14
前端實現圖片上傳實時預覽
方法一:
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);
其中bitMap獲取到的資料為圖片經過base64轉碼後的結果,可以設定到img標籤的src屬性裡,如 '<img src=" '+bitmap+' "/>'