FormData ajax 跨域上传图片 cros方式
FormData参考： http://www.jianshu.com/p/282eda9d1d0a
CORS
跨域资源共享（CORS）Cross-Origin Resource Sharing (CORS) 是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。
其实就是在服务器端也添加一个允许该操作的地址 Access-Control-Allow-Origin: http://xuan.news.cn
CORS与JSONP相比，更为先进、方便和可靠。
- 1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
- 2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
- 3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。Header set Access-Control-Allow-Origin * 为了防止XSS攻击我们的服务器， 我们可以限制域，比如Access-Control-Allow-Origin: http://blog.csdn.net很多服务都已经提供了CORS支持，比如 AWS 支持跨域资源分享功能CORS，向S3上传不需要代理。
jsonp的实现原理是动态插入script标签用作前后台传递数据，但传的若是文件，则jsonp无能为力，所以无法实现文件的跨域上传。
flash可以实现文件跨域上传 本方法可以支持老版本浏览器
cros,
关于代码
<form enctype="multipart/form-data" class="upload-form" id="upload-form"></form>
var form = document.getElementById("upload-form");
var formdata = new FormData( form );
//ajax内参数
{
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">请选取一个图像文件:</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, //处理表单数据
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>
网友评论