我想用jquery ajax上传裁剪的图像。因此,我从canvas元素创建一个blob,将其附加到表单数据。这到目前为止工作正常,但我猜有一些同步/异步问题。我在网上搜索了javascript回调,但我不确定这是否正确。问题是
在将blob添加到表单数据之前将执行return formData;
。我认为有一个简单的解决方案来解决我的问题,但我无法完成它,也许你可以帮助我。
$.ajax({
url: this.$upload.data('url'),
method: 'POST',
contentType: false,
processData: false,
cache: false,
data: (function(_this) {
var formData = new FormData();
_this.getCroppedImage().toBlob(
function(blob) {
formData.append('file', blob, _this.file.name);
},
_this.file.type
);
$.each(_this.$element.data(), function(key, value) {
formData.append(key, value);
});
return formData;
})(this)
});
知道可能很重要:我还使用https://github.com/blueimp/JavaScript-Canvas-to-Blob让所有浏览器都能使用toBlob方法。
答案 0 :(得分:1)
要完成此任务,您需要查看承诺对象a good library for this is q.js
基本上你创建了一个构建表单数据的函数,然后等待表单数据完成,当promise解析时,它会通过“then”回调将表单数据传递给你的ajax函数。然后你的ajax调用将会运行
function ajaxFn(){
//result is your formData in this case
getFormData().then(function(result){
//this won't run until the promise resolves, aka formData is complete
$.ajax({
url: this.$upload.data('url'),
method: 'POST',
contentType: false,
processData: false,
cache: false,
data: result
});
});
}
function getFormData(){
var deferred = Q.defer();
var formData = new FormData();
$.each(_this.$element.data(), function(key, value) {
formData.append(key, value);
});
_this.getCroppedImage().toBlob(
function(blob) {
formData.append('file', blob, _this.file.name);
//this is what will get passed into your then function above
deferred.resolve(formData);
},
_this.file.type
);
return deferred.promise;
}