Question

我想用jquery ajax上传裁剪的图像。因此，我从canvas元素创建一个blob，将其附加到表单数据。这到目前为止工作正常，但我猜有一些同步/异步问题。我在网上搜索了javascript回调，但我不确定这是否正确。问题是

return formData;

在将blob添加到表单数据之前将执行

。我认为有一个简单的解决方案来解决我的问题，但我无法完成它，也许你可以帮助我。

$.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方法。

Answer 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;
}

在继续之前等待canvas.toBlob（）

1 个答案: