FormData ajax 跨域上傳圖片 cros方式
FormData參考： http://www.reibang.com/p/282eda9d1d0a
CORS
跨域資源共享（CORS）Cross-Origin Resource Sharing (CORS) 是W3c工作草案净赴，它定義了在跨域訪問(wèn)資源時(shí)瀏覽器和服務(wù)器之間如何通信直晨。CORS背后的基本思想是使用自定義的HTTP頭部允許瀏覽器和服務(wù)器相互了解對(duì)方忧便，從而決定請(qǐng)求或響應(yīng)成功與否。
其實(shí)就是在服務(wù)器端也添加一個(gè)允許該操作的地址 Access-Control-Allow-Origin: http://xuan.news.cn
CORS與JSONP相比例驹，更為先進(jìn)、方便和可靠甥捺。
- 1烛谊、 JSONP只能實(shí)現(xiàn)GET請(qǐng)求，而CORS支持所有類(lèi)型的HTTP請(qǐng)求嗜浮。
- 2羡亩、 使用CORS，開(kāi)發(fā)者可以使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù)危融，比起JSONP有更好的錯(cuò)誤處理夕春。
- 3、 JSONP主要被老的瀏覽器支持专挪，它們往往不支持CORS，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS片排。對(duì)一個(gè)簡(jiǎn)單的請(qǐng)求寨腔，沒(méi)有自定義頭部，要么使用GET率寡，要么使用POST迫卢，它的主體是text/plain,請(qǐng)求用一個(gè)名叫Orgin的額外的頭部發(fā)送。Origin頭部包含請(qǐng)求頁(yè)面的頭部（協(xié)議冶共，域名乾蛤，端口），這樣服務(wù)器可以很容易的決定它是否應(yīng)該提供響應(yīng)捅僵。
服務(wù)器端對(duì)于CORS的支持家卖，主要就是通過(guò)設(shè)置Access-Control-Allow-Origin來(lái)進(jìn)行的。Header set Access-Control-Allow-Origin * 為了防止XSS攻擊我們的服務(wù)器庙楚， 我們可以限制域上荡，比如Access-Control-Allow-Origin: http://blog.csdn.net很多服務(wù)都已經(jīng)提供了CORS支持，比如 AWS 支持跨域資源分享功能CORS馒闷，向S3上傳不需要代理酪捡。
jsonp的實(shí)現(xiàn)原理是動(dòng)態(tài)插入script標(biāo)簽用作前后臺(tái)傳遞數(shù)據(jù)叁征，但傳的若是文件，則jsonp無(wú)能為力逛薇，所以無(wú)法實(shí)現(xiàn)文件的跨域上傳捺疼。
flash可以實(shí)現(xiàn)文件跨域上傳 本方法可以支持老版本瀏覽器
cros,
關(guān)于代碼
<form enctype="multipart/form-data" class="upload-form" id="upload-form"></form>
var form = document.getElementById("upload-form");
var formdata = new FormData( form );
//ajax內(nèi)參數(shù)
{
processData: false,
contentType: false,
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> New Document </title>
<meta charset="utf-8">
<script src="http://xuan.news.cn/cloudnews/xhcms_2014/js/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" class="upload-form">
<dt class="img-cont">
<div class="trgger-upload">請(qǐng)選取一個(gè)圖像文件:</div>
<input type = "file" id = "file" name = "fileImg" class="upload-btn" />
</dt>
<div class="form-datas">
<div class="form-list required">
<span class="cont-name">圖片名稱：</span>
<span class="cont-area">
<input type="text" name="title" class="cont-area">
</span>
</div>
<input type="submit" class="hidden">
<span class="submit-btn">提交</span>
</div>
</form>
</body>
</html>
<script type="text/javascript">
var postData = function( form , callback){
var formdata = new FormData( form );
$.ajax({
url: "",
type: "post",
data: formdata, //處理表單數(shù)據(jù)
dataType: 'json',
processData: false,
contentType: false,
success: function(data){
console.log(data);
},
error: function(data){
console.log(data);
}
})
}
$(".submit-btn").on("click",function(){
postData($(this).parents("form")[0]);
})
</script>
