Ajax 上傳文件(input file FormData)

FormData對象用以將數據編譯成鍵值對,以便用XMLHttpRequest來發送數據。其主要用於發送表單數據,但亦可用於發送帶鍵數據(keyed data),而獨立於表單使用。html

jQuery Ajax 上傳文件

經過 Ajax 向後臺發送文件(包括圖片)時,其參數類型屬於對象。能夠建立一個 FormData 對象,而後調用它的 append() 方法來添加字段。
例如:jquery

var formData = new FormData();

formData.append("username", "cedric");
formData.append("tel", 15866666666); //數字123456會被當即轉換成字符串 "15866666666"

// HTML 文件類型input,由用戶選擇
formData.append("userfile", fileInputElement.files[0]);

實例應用

  • html代碼
<div class="form-group">
    <label for="upload_crowd_name" class="col-sm-2 control-label">人羣名稱</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="upload_crowd_name" placeholder="請輸入人羣名稱">
    </div>
</div>
<div class="form-group">
    <label for="upload_crowd_desc" class="col-sm-2 control-label">人羣說明</label>
    <div class="col-sm-10">
        <textarea class="form-control" id="upload_crowd_desc" cols="20" rows="5"></textarea>
    </div>
</div>
<div class="form-group">
    <label for="crowd_file" class="col-sm-2 control-label">上傳文件</label>
    <div class="col-sm-10">
        <input type="file" accept=".xlsx" id="crowd_file">
    </div>
</div>
  • js代碼
$('.submit').click(function () {
    var crowd_name = $.trim($('#upload_crowd_name').val());
    var crowd_desc = $.trim($('#upload_crowd_desc').val());
    var crowd_file = $('#crowd_file')[0].files[0];

    var formData = new FormData();

    formData.append("crowd_file",$('#crowd_file')[0].files[0]);
    formData.append("crowd_name", crowd_name);
    formData.append("crowd_desc", crowd_desc);

    $.ajax({
        url:'/upload/',
        dataType:'json',
        type:'POST',
        async: false,
        data: formData,
        processData : false, // 使數據不作處理
        contentType : false, // 不要設置Content-Type請求頭
        success: function(data){
            console.log(data);
            if (data.status == 'ok') {
                alert('上傳成功!');
            }

        },
        error:function(response){
            console.log(response);
        }
    });

})

參考:

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objectsajax

相關文章
相關標籤/搜索