方法一：

使用URL.createObjectURL()方法:

var imgPath = document.getElementById("imgPath");//上傳圖片的id var stuImg = document.getElementById("stuImg");//顯示圖片的id//URL對象是硬盤（SD卡等）指向文件的一個路徑，獲得一個http格式的url路徑 var path=window.URL.createObjectURL(imgPath.files.item(0));//數據格式為blob二進制數據 //把新的url給預留好的圖片標簽 stuImg.src=path; // document.images[0].src=path;//document.images文檔所有圖片集合 //地址清空 stuImg.onload = function(){window.URL.revokeObjectURL(path); };

方法二：

使用FileReader()方法：

var imgPath = document.getElementById("imgPath");//上傳圖片的id//判斷是否支持FileReader if (window.FileReader) {var reader = new FileReader(); } else {alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！"); }//獲取文件 var file = imgPath.files[0];//圖片類型的正則表達式 var imageType = /^image\//;//是否是圖片 if (!imageType.test(file.type)) {alert("請選擇圖片！");return; }reader.readAsDataURL(file);//將文件讀取為DataURL//讀取完成 reader.onload = function(e) {//獲取圖片domvar img = document.getElementById("stuImg");//圖片路徑設置為讀取的圖片img.src = e.target.result; };

?

?

轉載于:https://www.cnblogs.com/nananana/p/7992015.html

總結

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

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