使用JS配合表單上傳圖片並預覽

一、背景和需求

在商家上架新商品時，需要從本地上傳商品圖片並預覽
將圖片連同其他商品信息放入表單，通過POST請求發送給后端

二、HTML代碼

<div class="box">
<div class="box-left">
    <div class="title"><h1>上傳商品圖片</h1></div>
    <div class="sizeHint">（圖片大小不得超過2M）</div>
    
    <div class="content">
        <div id="img">圖片預覽</div>
        <form id="form1" action="">
            <input type="file" name="file" id="pic" onchange="preview(this,'img')">
        </form>
        <div class="link">
            <a href="/backstage/" id="link">返回后台管理頁面</a>
        </div>
    </div>
</div>

三、實現思路

1、通過 [type=file] 的input上傳文件

為這個 [type=file] 的input綁定onchange事件
將接收到的圖片文件傳到preview函數中
檢測文件類型和大小是否符合要求

2、將文件以Data URL形式讀入頁面

創建FileReader實例
通過onload函數將圖片渲染到頁面上

3、通過Ajax發送FormData數據類型的POST請求

先利用已有的表單（商品數據）初始化Formdata實例
再通過append方法將圖片文件追加到Formdata實例內

四、相關JS代碼

關於圖片的上傳和預覽：

function preview(file,img)
{  
    if (file.files && file.files[0]){     
        var size = file.files[0].size;
        if(size > 2 * 1024*1024){
            alert("上傳大小不符合");
            return false;
        }
         // 獲取文件名 包含后綴  
         var src = file.files[0].name;  
         // 獲取文件后綴                                                      
         var type=(src.substr(src.lastIndexOf("."))).toLowerCase(); 
        // 判斷文件類型                                   
        if(type != ".jpg" && type != ".gif" && type !=".jpeg" && type != ".png"){           
            alert("您上傳圖片的類型不符合(.jpg|.jpeg|.gif|.png)！");
            return false;
        }
          
        var reader = new FileReader(); 

        //將文件以Data URL形式讀入頁面
        reader.readAsDataURL(file.files[0]); 

        var prevDiv = document.getElementById(img);  

        //成功讀取后 顯示圖片           
        reader.onload = function(evt){                  
            prevDiv.innerHTML = '<img src="' + evt.srcElement.result + '" style="max-width:220px;" />';             
        }  
    }  
}

Ajax請求：

 $(function(){
     //為“立即添加”按鈕綁定click事件
     $('#btn-submit').click(function()
    {
        // 用已有表單來初始化
        var formData = new FormData($("#new")[0]);

        //將圖片文件對象添加到formData中        
        formData.append('img', $("#pic")[0].files[0]); 
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        $.ajax({
            type : 'post',

            //這里寫后端處理的url
            url : ' ',
         
            data : formData,

            cache : false,

            async: false,
            // 不處理發送的數據，因為data值是Formdata對象，不需要對數據做處理
            processData : false, 

            // 不設置Content-type請求頭
            contentType : false, 

            success : function()    {        },

            error : function(){   }
        })
    });
 });

完整的源代碼請前往我的github倉庫

五、效果圖