html5 js 圖片上傳預覽
阿新 • • 發佈：2019-02-07
首先獲取顯示圖片的位置和input的物件，判斷瀏覽器是否相容
var img = document.getElementById("img");
var file = document.getElementById("file");
if(!(window.FileReader && window.File && window.FileList && window.Blob)) {
img.alt = '您的瀏覽器不支援fileReader';
}然後給input繫結變動事件
設定處理file.addEventListener('change', function(e){ var files = this.files; if(files.length){ // 對檔案進行處理，下面會講解checkFile()會做什麼 checkFile(this.files); } });
// 圖片處理 function checkFile(files){ var file = files[0]; var reader = new FileReader(); // show表示<div id='show'></div>，用來展示圖片預覽的 if(!/image\/\w+/.test(file.type)){ show.innerHTML = "請確保檔案為影象型別"; return false; } // onload是非同步操作 reader.onload = function(e){ //show.innerHTML = '<img src="'+e.target.result+'" alt="img">'; img.src = e.target.result; } reader.readAsDataURL(file); }
下面是一個案例，我簡單封裝了一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="file" id="myfile"> <img src="" id="mypic" alt=""> <script type="text/javascript"> function change_pic(img_id, file_id) { var img = document.getElementById(img_id); var file = document.getElementById(file_id); if (!(window.FileReader && window.File && window.FileList && window.Blob)) { img.alt = '您的瀏覽器不支援fileReader'; } file.addEventListener('change', function(e) { var files = this.files; if (files.length) { // 對檔案進行處理，下面會講解checkFile()會做什麼 checkFile(this.files); } }); // 圖片處理 function checkFile(files) { var file = files[0]; var reader = new FileReader(); // show表示<div id='show'></div>，用來展示圖片預覽的 if (!/image\/\w+/.test(file.type)) { show.innerHTML = "請確保檔案為影象型別"; return false; } // onload是非同步操作 reader.onload = function(e) { //show.innerHTML = '<img src="'+e.target.result+'" alt="img">'; img.src = e.target.result; } reader.readAsDataURL(file); } } change_pic("mypic", "myfile"); //呼叫方法，change_pic(圖片id，檔案選擇iput框id); </script> </body> </html>