把图片上传到云上——解决跨域问题
前一篇文章中讲到“找不到地方去修改上传图片的url”，后来看到stackoverflow的一个帖子，发现在add方法中可以设置要上传图片的url，http://stackoverflow.com/questions/12987066/jquery-file-upload-how-to-change-the-upload-url-dynamically
于是我将原来的代码改写成：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39add: function (e, data) {
$(".file-drop-zone-title").hide();
$("#add-img").hide();
$(".file-preview-thumbnails").empty();
$.getJSON("http://127.0.0.1:3000/doAction/picauthtest",
function(ret) {
var sign = encodeURIComponent(ret.data.sign);
var url = ret.data.url + '?sign=' + sign;
data.url = url;
$.each(data.files, function(i,value) {
var fileObj = value;
var objUrl = getObjectURL(fileObj);
var uid = "preview-" + i;
var html = '<div id="'+uid+'"><img src="'+objUrl+'" style="width:200px" class="img-thumbnail">'+
'<span class="status"></span></div>';
$(".file-preview-thumbnails").append(html);
});
data.context = $('<button/>').text('上传').addClass("btn btn-success")
.appendTo($(".modal-footer"))
.click(function () {
data.submit();
});
});
},
done:function (e, data) {
alert("上传成功");
console.log(data);
},
fail:function (e, data) {
alert("上传失败");
console.log(data);
},
submit:function (e, data) {
data.formData = {"filecontent":data.files[0]};
if (!data.formData.filecontent) {
data.context.find('button').prop('disabled', false);
return false;
}
}
每次add的时候向验证服务器获取上传的url，然后加到data.url中。在submit的时候只要简单判断一下图片是否存在就行，这样是可以按照jQuery-File-Upload的流程进行上传。
原本以为这样就能解决问题了，结果出现了更头疼的问题——跨域请求被阻止。
这个问题之前用bootstrap-file-input控件时也遇到过，但是没有解决，后来换了jQuery-File-Upload后，自己重写$.ajax()的options就解决了。所以确定问题一定是在options中。于是我检查了jQuery-File-Upload的data对象中的属性，又搜到一篇帖子http://bbs.qcloud.com/thread-8357-1-1.html. 帖子里提到在上传图片到图片云时需要关闭进度监控的事件。我尝试着去关闭jQuery-File-Upload的进度监控，可是并没有找到参数可以设置，于是就打开了jquery.fileupload.js的源代码，搜索progress关键字，找到了_initProgressListener这个方法。它在_initDataSettings方法和upload方法中被调用了。既然没法设置禁用，那就直接把这段代码注释掉吧。
然后我再上传图片的时候，就没有跨域请求被阻止的问题了。关于进度监控的事件是腾讯云的bug，还是故意禁止的需要继续研究一下。那这样UI上的上传进度条要怎么处理啊！