javascript - Ajax 调用成功后 JQuery 调用不工作

Question

我有一个 Ajax 调用，如下所示:

$("#start-upload-btn").click(function(){
    $.ajax({
        type: "post",
        url: "",
        data: {
            newProjectName: $('#project-name').val(),
            csrfmiddlewaretoken: csrfToken
        },
        success: function(data){
            $("#file-upload").click();
        }
    })
});

成功后，我想单击 id #file-upload 的元素来启动文件选择对话框，但将代码放入 success 函数中失败。它在其他任何地方都有效。 Ajax 成功函数的范围有什么特别之处吗？我实在是想不通。

谢谢

Answer 1

通过 ajax 成功回调在任何普通元素(包括按钮)上发出 click 本身并没有什么问题。

问题在于文件输入对话框不是“普通元素”。它有一些特定的安全限制 - 其中之一明显限制了您与其交互。

这可以通过以下 fiddle 来证明:https://jsfiddle.net/qhfwobpz/

您会发现直接在文件上传上发出点击是没有问题的。通过 ajax 回调执行此操作，您会看到回调被调用，但文件对话框永远不会显示。

This answer提供了有关“原因”的更多详细信息，归结为您可以从用户发出的事件打开对话框，但不能纯粹以编程方式打开对话框。