2019獨角獸企業重金招聘Python工程師標準>>>

<style type="text/css">
?? ?/* 上傳圖片預覽 */
?? ?.imgdivview, .img, img { ?
?? ? ?? ?width:200px; ?
?? ? ?? ?height:200px; ?
?? ?}
?? ?.imgdivview{ ?
?? ??? ?border:1px solid #000; ?
?? ?}
?? ?.dhx_bg_img_fix{
?? ??? ?cursor: pointer;
?? ?}
?? ?
</style>

/**
?* 預覽圖片
?* @param id divID
?* @param file this
?* 案例：<input type="file" name="file4" class="span6" οnchange="preview('imgdiv4',this)"></input>
?*?????? <div class="imgdivview" id="imgdiv4"></div> ?
?*/
function preview(id,file) { ?
?? ?var prevDiv = document.getElementById(id); ?
?? ?if (file.files && file.files[0]) { ?
?? ??? ?var reader = new FileReader(); ?
?? ??? ?reader.onload = function(evt){ ?
?? ??? ?prevDiv.innerHTML = '<img src="' + evt.target.result + '" />'; ?
?? ?};
?? ?reader.readAsDataURL(file.files[0]); ?
?? ?}else{
?? ??? ?prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>'; ?
?? ?} ?
}

轉載于:https://my.oschina.net/lcdmusic/blog/674672

總結

以上是生活随笔為你收集整理的js实现上传图片及时预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。