如何在 blueimp 上传器开始多文件上传之前进行 AJAX 调用答案

【问题标题】：How to make an AJAX call before blueimp uploader starts a multi-file upload如何在 blueimp 上传器开始多文件上传之前进行 AJAX 调用
【发布时间】：2019-05-20 19:50:01
【问题描述】：

当多个文件被拖放到一个拖放区时，我需要在上传单个文件之前做一次服务器端准备。

理想情况下，上传器应该有一个多文件初始化回调，它允许我对我的服务器（准备完成的地方）进行 ajax 调用，并且只有在准备调用返回时才开始上传单个文件。

有没有办法达到这个目的？

目前，我为每个上传的文件运行的服务器端 (php) 代码会检查准备工作是否已完成，并在需要时运行准备功能。但由于上传者异步发送多个文件，会出现竞态条件，有时会多次调用准备函数。

【问题讨论】：

这当然是可能的，但没有必要让它同步。如果您在解决可能的竞争条件方面需要帮助，请将相关代码添加到问题中。
不推荐使用同步 AJAX，因此您应该尽量避免使用它。
发送AJAX请求准备，并让回调函数上传。
感谢您的反馈。我编辑标题以删除“同步”。问题是上传者似乎没有在单个文件开始上传之前触发的回调。所以，我认为@Barmar 建议我放弃上传者的“自动开始上传”，而是以编程方式开始上传。
是的，这就是我的建议。

标签： jquery file upload blueimp

【解决方案1】：

我能够通过听从 barmar 的建议并添加一个按钮来启动上传来解决我的问题。

我在这里找到了具体说明：https://stackoverflow.com/a/38236305/671669

我现在将这段代码包含在 blueimp jQuery-File-Upload 插件的初始化中：

add: function (e, data) {
    // enable the upload button
    $("#fileupload-start-button").prop('disabled', false);

    // wait for button click to process
    $("#fileupload-start-button").on('xyzUploadTrigger', function (e) {
        data.submit();
    });
},

我与“开始上传”按钮的绑定如下所示：

$("#fileupload-start-button").on('click', function (e) {
    $(this).prop('disabled', true)
    e.preventDefault();

    // prepare server-side for upload of resources
    axios.post('/resources/initResourceCollectionForUploader',
        {
            'params': params,
        })
        .then(function (response) {
            // hide the upload button and trigger it
            $("#fileupload-controls-container").addClass('d-none');
            $("#fileupload-start-button").trigger('xyzUploadTrigger');
        })
        .catch(function (error) {
            console.log(error);
        });
});

【讨论】：