JS圖片的上傳預覽和表單提交（FileReader()方法）
一開始沒有搞明白下面這塊代碼的，今天有時間簡單整理下
核心點：FileReader()方法
以下是代碼（以JSP文件為例）
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> //上傳-預覽邏輯 $(".newspic").click(function() { //1.點擊默認圖片，出發標簽<a>的click事件 $(this).next('input').click();//2.觸發input的點擊事件，用戶選擇圖片進行上傳 }); function showPic(data) {//3.當用戶上傳圖片后，觸發input標簽的onchange事件，執行showPic()方法 if (data.files && data.files[0]) {//4.判斷input標簽的file是否存在 var reader = new FileReader();//5.實例化一個FileReader()接口 reader.readAsDataURL(data.files[0]);//6.通過readAsDataURL()方法讀取文件，將圖片內嵌在網頁之中 reader.onload = function(evt) {//7.調用FileReader()的onload事件，當文件讀取成功時，執行8 //8.將reader的result屬性值賦值給data.parentNode.childNodes[1].childNodes[1].src，實現圖片預覽 data.parentNode.childNodes[1].childNodes[1].src = evt.target.result; } } } //上傳-提交保存邏輯 //用戶選擇圖片,點擊提交；將數據通過表單(name-value)提交給后台；注意：需要表單enctype="multipart/form-data"；否則后台無法接受 </script> </head> <body> <form action="hospital/saveHospital.do" name="editForm" method="post" enctype="multipart/form-data"> <a href="javascript:void(0)" class="newspic"> <!-- static/img/selectimg.png是默認圖片，當reader讀取完畢后，執行步驟8，即展示上傳圖片 --> <img style="width:200px;height:100px;" src="static/img/selectimg.png"/>/ </a> <input type="file" id="logoUrl" name="logoUrl" onchange="showPic(this)" style="display: none"/> <button type="submit" >提交</button> </form> </body> </html>
示例效果
