JS實現預覽上傳的圖片
阿新 • • 發佈：2020-06-28
也是這學期的WEB前端程式設計課，做答辯專案的時候用上的一個功能。之前是組內的小夥伴寫的，用了兩個函式實現，而這兩個函式的內容基本一致。按照程式設計的思維，應該把函式改成可複用的，於是就有了修改後的版本。改進的原理我有寫在改進後的註釋裡，不過為了方便閱讀，這裡也寫一下。
修改原理其實有點歪門邪道：DisplayPic(this)中的this是指input控制元件本身，於是我把img的id改成跟input的name相同，這樣一來就可以通過獲取input的name屬性來得到img標籤的id，也就可以修改對應img的屬性。
修改前
<html lang="en"> <head> <meta charset="utf-8"> <title>JS display picture</title> </head> <body> <div> <form action="#" method="post" enctype="multipart/form-data"> <p>圖片1</p> <input id="file1" name="file1" type="file" value="選擇圖片" onchange="DisplayPic1(this)"> <img id="showpic1" src="" alt="" style="display: none; max-width: 600px; max-height: 600px"/><br> <p>圖片2</p> <input id="file2" name="file" type="file" value="選擇圖片" onchange="DisplayPic2(this)"> <img id="showpic2" src="" alt="" style="display: none; max-width: 600px; max-height: 600px"/><br> <input type="submit" value="提交"> <!-- 指令碼作用：選擇圖片之後，顯示在頁面上--> <script> var pic1 = ''; function DisplayPic1(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('showpic1').style.display = 'block'; document.getElementById('showpic1').src = evt.target.result; pic1 = evt.target.result; console.log(pic1) } reader.readAsDataURL(file.files[0]); } var pic2 = ''; function DisplayPic2(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('showpic2').style.display = 'block'; document.getElementById('showpic2').src = evt.target.result; pic2 = evt.target.result; console.log(pic2) } reader.readAsDataURL(file.files[0]); } </script> </form> </div> </body> </html>
修改後
<html lang="en"> <head> <meta charset="utf-8"> <title>JS display picture</title> </head> <body> <div> <form action="#" method="post" enctype="multipart/form-data"> <p>圖片1</p> <input id="input_pic1" name="pic1" type="file" value="選擇圖片" onchange="new DisplayPic(this)"> <img id="pic1" src="" alt="" style="display: none; max-width: 600px; max-height: 600px"/><br> <p>圖片2</p> <input id="input_pic2" name="pic2" type="file" value="選擇圖片" onchange="new DisplayPic(this)"> <img id="pic2" src="" alt="" style="display: none; max-width: 600px; max-height: 600px"/><br> <input type="submit" onclick="" value="提交"> <!-- 指令碼作用：選擇圖片之後，顯示在頁面上--> <script> // 改進原理其實有點歪門邪道： // DisplayPic(this)中的this是指input控制元件本身，於是我把img的id改成跟input的name相同 // 這樣一來就可以通過獲取input的name屬性來得到img標籤的id，也就可以修改對應img的屬性 var pic = ''; function DisplayPic(obj) { if (!obj.files || !obj.files[0]) { return; } var reader = new FileReader(); var name = obj.name; reader.onload = function (evt) { document.getElementById(name).style.display = 'block'; document.getElementById(name).src = evt.target.result; pic = evt.target.result; console.log(pic) } reader.readAsDataURL(obj.files[0]); } </script> </form> </div> </body> </html>