文件上传跨域解决方案-jQuery-File-Upload

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

GIT 下载地址

https://github.com/blueimp/jQuery-File-Upload

亲测HTTPS HTTP跨域无压力

不用自带的DEMO

用下面的DEMO

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<style>
.bar {
height: 18px;
background: green;
}
.content{
width: 100%;text-align: center;margin-top: 70px;
}
#progress{
border-radius:6px;width: 300px;background: red;
margin: 10px auto;
}
</style>
<body><div class="content">
<input id="fileupload" type="file" name="upfile" ">
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<img id="uploadimg" src="__PUBLIC__/images/bg.jpg" width="400px" height="408px"/>
</div><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>$('#fileupload').fileupload({
url: "",
type:"POST",
dataType:"json",
autoUpload : true,
acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,

//跨域
forceIframeTransport: true,

formData: {
action:"UploadVMKImagePath",
param:JSON.stringify({
projectId:12343,
fileType:"任务日志图片"
})
}, done: function (e, data) {
console.log(e);
console.log(data);//data里面包含了服务端返回的字段
},
fail:function(e,data){
console.log("上传失败："+data.errorThrown);
}, progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100);
$('#progress .bar').css(
'width',
progress + '%'
);
}, });</script>
</body>
</html>

中间遇到的问题是，一旦采用了跨域就会使用FROM包含 iframe的方式上传，所以在done函数里是无法直接拿到服务器的返回值的。

这个插件定义的是这样如果采用了iframe方式，必须要设置一个CALL参数，当服务器接受完你的上传数据回CALL你设置的页面

redirectParamName:"callUrl",
redirect:"http://"+window.location.host+"/app/callupload.html?",//回调页面

很显然服务端要接受和处理你这个callurl，不过这次的项目中，目标上传服务器的处理完上传后，是直接把数据写到页面的。而不是去CALL什么地址。。

没法。。只有从其他地方下手了。

通过调试发现

既然iframe,上传完成后服务端的返回内容一定iframe里面的。

jquery.iframe-transport.js

在这个文件里的下面代码中可以记录下服务器返回的结果

window.setTimeout(function () {
// Removing the form in a setTimeout call
// allows Chrome's developer tools to display
// the response result console.log("【upload-iframe】");
console.log(iframe); //form.remove();
}, );

iframe 这个参数在jquery.iframe-transport.js中就定义好了，输出看看就知道了