方法一：

使用URL.createObjectURL()方法:

var imgPath = document.getElementById("imgPath");//上傳圖片的id var stuImg = document.getElementById("stuImg");//顯示圖片的id//URL對(duì)象是硬盤（SD卡等）指向文件的一個(gè)路徑，獲得一個(gè)http格式的url路徑 var path=window.URL.createObjectURL(imgPath.files.item(0));//數(shù)據(jù)格式為blob二進(jìn)制數(shù)據(jù) //把新的url給預(yù)留好的圖片標(biāo)簽 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("您的設(shè)備不支持圖片預(yù)覽功能，如需該功能請(qǐng)升級(jí)您的設(shè)備！"); }//獲取文件 var file = imgPath.files[0];//圖片類型的正則表達(dá)式 var imageType = /^image\//;//是否是圖片 if (!imageType.test(file.type)) {alert("請(qǐng)選擇圖片！");return; }reader.readAsDataURL(file);//將文件讀取為DataURL//讀取完成 reader.onload = function(e) {//獲取圖片domvar img = document.getElementById("stuImg");//圖片路徑設(shè)置為讀取的圖片img.src = e.target.result; };

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/nananana/p/7992015.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。