項目總結07：JS圖片的上傳預覽和表單提交（FileReader()方法）

時間 2019-11-13

標籤項目總結圖片上傳預覽表單提交 filereader 方法欄目 JavaScript 简体版

原文原文鏈接

JS圖片的上傳預覽和表單提交（FileReader()方法）

一開始沒有搞明白下面這塊代碼的，今天有時間簡單整理下

核心點：FileReader()方法

如下是代碼（以JSP文件爲例）javascript

<!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>