jQuery ajax 提交表單圖片

基於 jQuery

 

HTML：

<form id="form" enctype="multipart/form-data">
    <input type="text" name="name" />
    <input type="text" name="desc" />
    <input type="file" name="image"  id="doc0" />

    <button type="button" id="submit" > 提交 </button>
</form>

 

JS：

// 提交表單
    $('#submit').click(function () {
        
        // 創建FormData對象
        var data = new FormData($('#form')[0]);

        // 為FormData對象添加數據
        $.each($('#doc0')[0].files, function(i, file) {
            data.append('image', file);
        });

        $.ajax({
            url:'yoururl',
            type:'POST',
            data:data,
            cache: false,
            contentType: false,        /* 不可缺 */
            processData: false,         /* 不可缺 */
            success:function(result){
                // 這里是你的成功邏輯
            }
        });
    });