js img讀取本地圖片
阿新 • • 發佈:2019-02-15
HTML:
<input type="file" onchange="previewHandle(this)" />
<img id="preview-img" />
JavaScript:
線上預覽:function previewHandle(fileDOM) { var file = fileDOM.files[0], // 獲取檔案 imageType = /^image\//, reader = ''; // 檔案是否為圖片 if (!imageType.test(file.type)) { alert("請選擇圖片!"); return; } // 判斷是否支援FileReader if (window.FileReader) { reader = new FileReader(); } // IE9及以下不支援FileReader else { alert("您的瀏覽器不支援圖片預覽功能,如需該功能請升級您的瀏覽器!"); return; } // 讀取完成 reader.onload = function (event) { // 獲取圖片DOM var img = document.getElementById("preview-img"); // 圖片路徑設定為讀取的圖片 img.src = event.target.result; }; reader.readAsDataURL(file); }
https://runjs.cn/code/qyyybn5t