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表单忘记设置，导致上传表单失败。