頁面test.html
<!DOCTYPE>
<html>
<head>
<title> formdata file jquery ajax upload</title>
</head>
<body>
<form class="form-horizontal" role="form" id="myForm"
action="http://v0.api.upyun.com/xxx" method="post"
enctype="multipart/form-data">
<input type="hidden" name="policy"
value="">
<input type="hidden" name="signature"
value="">
<div class="form-group">
<label class="col-sm-2 control-label">說明:</label>
<div class="col-sm-10">
<p class="form-control-static ">ajax 文件上傳 。</p>
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-2 control-label"><s>*</s>圖片選擇:</label>
<div class="col-sm-7">
<input type="file" name="file" id="file_upload" value=""
class="form-control" placeholder="圖片地址">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-7">
<a id="btnAjax" class="btn btn-info col-md-5 col-lg-offset-1"
onclick="uploadByForm();">Ajax上傳</a>
</div>
</div>
</form>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
/**
* ajax 上傳。
*/
function uploadByForm() {
var formData = new FormData($("#myForm")[0]);//用form 表單直接 構造formData 對象; 就不需要下面的append 方法來爲表單進行賦值了。
//var formData = new FormData();//構造空對象，下面用append 方法賦值。
// formData.append("policy", "");
// formData.append("signature", "");
// formData.append("file", $("#file_upload")[0].files[0]);
var url = "http://v0.api.upyun.com/xxx";
$.ajax({
url : url,
type : 'POST',
data : formData,
/**
* 必須false纔會避開jQuery對 formdata 的默認處理
* XMLHttpRequest會對 formdata 進行正確的處理
*/
processData : false,
/**
*必須false纔會自動加上正確的Content-Type
*/
contentType : false,
success : function(responseStr) {
alert("成功：" + JSON.stringify(responseStr));
// var jsonObj = $.parseJSON(responseStr);//eval("("+responseStr+")");
},
error : function(responseStr) {
alert("失敗:" + JSON.stringify(responseStr));//將 json對象 轉成 json字符串。
}
});
}
</script>
</body>
</html>
[quote]
MDN [url=https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects]相關材料[/url]
[url=http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html]XHR 2相關[/url]
[/quote]