在 jQuery.ajax 的 beforeSend 中加载异步内容答案

【问题标题】：Load async content within beforeSend of jQuery.ajax在 jQuery.ajax 的 beforeSend 中加载异步内容
【发布时间】：2015-09-26 09:55:07
【问题描述】：

我正在使用 jQuery 发出 ajax 请求。

在发送所有ajax之前，我想读取一个特定的文件字段，并将内容附加到请求数据中：

<input id="upload" type="file" />

还有脚本：

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        var file = document.getElementById('upload');
        if(file.files.length > 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
                settings.data += '&file=' + btoa(e.target.result);
            }
            reader.readAsText();
        }
    }
});

问题是，当我调用reader.readAsText()时，ajax请求是立即发送的，并且不要等到内容加载完毕，所以数据更改不能保证完成，或者说永远不会。

那么有什么东西可以延迟发送动作直到读取操作完成，或者使读取动作同步？

【问题讨论】：

beforeSend 用于在发送之前访问原始请求标头。你想在请求之前做的事情......你在请求之前做:)) 你想在之前创建FileReader，并在它的onload处理程序中发出请求。
@moonwave99，我知道，但我正在开发一个 jQuery 插件，以允许在数据部分添加文件和 blob 字段。如果我提供文件内容（支持二进制流），我已经完成，ajax 会将这些内容作为文件上传。但是我在这里被屏蔽了。
@moonwave99，还有，我想保持界面简单，我可以这样调用，希望可以支持：$.ajax('url', { data: { file: fileInput.files[0]; } });
那么，做$.fileUpload(url, params)，通过重新调整promise来维护$.ajax合约，你就完成了:)) 通过ajaxSetup为所有请求注入一些东西可能过于普遍。

标签： javascript jquery ajax asynchronous

【解决方案1】：

我认为最好将ajax请求绑定到reader.onload处理程序。

var file = document.getElementById('upload');
if(file.files.length > 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
        settings.data += '&file=' + btoa(e.target.result);
        $.ajax({
            //send ajax ...
        });
    }
    reader.readAsText();
}

或者您可以通过在beforeSend 中返回false 来取消当前的ajax，并在reader.onload 中创建一个新的。

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        var file = document.getElementById('upload');
        if(file.files.length > 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
                settings.data += '&file=' + btoa(e.target.result);
                $.ajax(settings); // Send another ajax...
            }
            reader.readAsText();
        }
    }
});

【讨论】：

我知道，但我正在开发一个 jQuery 插件，以允许在数据部分添加文件和 blob 字段。如果我提供文件内容（支持二进制流），我已经完成，ajax 会将这些内容作为文件上传。但是我在这里被屏蔽了。
我认为在这种情况下，您应该返回false 以取消此ajax，并在beforeSend 中的reader.onload 中创建新的。更新了我的答案。
好吧，虽然创建另一个 ajax 请求不是很漂亮，但它确实解决了问题。
我宁愿说它一点也不漂亮:)