<div class="col-sm-3"><img id="targetImg" alt="修改圖像" class="img-thumbnail" src="" /> </div> <div id="prevDiv" class="col-sm-3"><img id="uploadImg" alt="上傳的圖像" class="img-thumbnail" src="" runat="server" /> </div><input id="imgUpload" type="file" class="" accept="image/*" οnchange="imgPreview(this);" /><script type="text/javascript">function imgPreview(file) {if (file.files && file.files[0]) {var reader = new FileReader();reader.onload = function (evt) {//prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';$("#uploadImg").attr("src", evt.target.result);}reader.readAsDataURL(file.files[0]);}else {$("#prevDiv").innerHTML = '<div style="width:20px;height:35px" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';}} </script>

　　效果：

詳細參考：

http://wangyong31893189.iteye.com/blog/1695472

轉載于:https://www.cnblogs.com/zhyue93/p/ImgPreView.html

總結

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

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