Jquery Ajax通過接口上傳文件實現及注意事項

準備工作

• 文件上傳接口：http://localhost:8081/manage/upload/upload_file.do

代碼實現

• HTML

<form class="form-horizontal" id="resGyForm">
     <div class="form-group">
          <label for="upload_file" class="col-sm-2 control-label">上傳文件</label>
          <div class="col-sm-10">
               <input type="file" id="upload_file">
          </div>
    </div>
	<div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
             <button type="button" class="btn btn-primary" id="btn">提交</button>
        </div>
    </div>
</form>

• JavaScript

$("#upload_file").change(function () {
   	var file = $("#upload_file")[0].files[0];
    var formData = new FormData();
    formData.append("upload_file",file);
    $.ajax({
      	url:"/manage/upload/upload_file.do",
        type:"POST",
        data:formData,
        dataType:"json",
        processData : false,	// 使數據不做處理
        contentType: false,		// 不要設置Content-Type請求頭
        success:function() {
        	if (res.status == 0){
                alert("成功");
            } else {
                alert(res.msg);
            }
        }
   	});

注意事項

• 上傳方式爲type:"POST"

• 文件其參數類型屬於對象，可以創建一個 FormData 對象，然後調用它的 append() 方法來添加字段

  var file = $("#upload_file")[0].files[0];
  var formData = new FormData();
  formData.append("upload_file",file);
  

• 通過Ajax上傳表單需要設置contentType："application/x-www-form-urlencoded"，這個和文件沒有關係，但是因爲我通過Ajax提交form表單忘記設置，導致上傳表單失敗。