触发对异步ajax done()上input = file的单击 [英] Trigger click on input=file on asynchronous ajax done()

问题描述

我有一个包含一些数据并上传的表格.仅当成功接收和处理数据后，才能启动上传.为此，我在

I have a form with some data and upload. The upload could be initiated only if data were successfully received and processed. To do that, I make an ajax call where I

1. 发送数据，
2. 检查其结果，
3. 触发click()以打开文件对话框.

click()的最后一件事不起作用，因为似乎异步调用阻止了打开上传窗口.仅当我设置async: false时它才有效.

The last thing with click() doesn't work as it seems that asynchronous call blocks opening an upload window. It works only if I set async: false.

我在文档和此站点中找不到任何内容，想知道那里存在什么问题以及如何使其保持通话异步?

I cannot find anything in documentation and this site and want to know what is the problem there and how to make it working keeping the call asynchronous?

示例:

$.ajax({
    type: "POST",
    url: "/Save",
    data: jsonText,
    dataType: "json",
    //async: false            [1]
}).done(function (msg) {    
    $("#upload").click();   
});

//$("#upload").click();       [2]

演示: http://jsfiddle.net/c2v00uxn/

注意:

• 如果我取消注释[1]或[2]，它确实起作用(文件对话框按预期显示).
• 将click()替换为trigger('click')无效
• 用live()/on()代替click()并没有帮助
• 文件上传控件在每个示例中都是可见的(因此不是因为隐藏了控件)
• ajax的超时设置无济于事.

更新

一般来说，这与如何单击"无关，而与异步ajax调用(到目前为止，仅适用于非异步调用)有关.

It's not about how to make a "click" in general, it's about how to click after an asynchronous ajax call (as of now, works only with non-asynchronous call).

推荐答案

由于w3c在浏览器中建议的安全功能，目前无法通过异步ajax回调打开文件弹出窗口.

Its not possible right now to open a file popup window from an async ajax callback due to w3c recommended security features in the browsers.

在文件输入元素的激活行为中，它首先检查该算法是否允许显示弹出窗口，如果没有，则中止下一步，而不执行其他任何操作.来自 w3c.org

In the file input element's activation behavior it first checks if the algorithm is allowed to show a popup, if not then abort the next steps without doing anything else. from w3c.org

如果满足以下任一条件，则允许算法显示弹出窗口:

1. 正在运行算法的任务正在处理中 (点击事件受信任)的激活行为.(受信任事件:由用户代理由于用户互动或DOM更改的直接结果而生成的事件是受信任的.由用户代理赋予的特权，这些特权不提供给脚本通过DocumentEvent.createEvent("Event")方法生成的事件，使用Event.initEvent()方法修改的事件或通过EventTarget.dispatchEvent()方法分派的事件.受信任事件的isTrusted属性的值为true ，而不受信任的事件的isTrusted属性值为false. 否则. http://www.w3.org/TR/2012 /WD-DOM-Level-3-Events-20120614/#trusted-events .)

2. 正在运行算法的任务当前正在运行 受信任事件的事件侦听器，其类型如下 列表:

1. The task in which the algorithm is running is currently processing an activation behavior whose click event was trusted.(trusted events : Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false. otherwise. http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120614/#trusted-events.)

2. The task in which the algorithm is running is currently running the event listener for a trusted event whose type is in the following list:

• 更改
• 点击
• dblclick
• 鼠标
• 重置
• 提交

w3c.org

在您的代码中，click事件不是由用户触发的，而是由ajax complete回调触发的.在这里，浏览器声明该事件不可信任以打开弹出窗口.在某些浏览器中，如果事件被声明为受信任，则可以看到isTrusted属性设置为true.

In your code the click event is not triggered by the user but its triggered by the ajax complete callback. Here the browser declares that the event cannot be trusted to open a popup. In some browsers you can see an isTrusted attribute set to true if the event is declared as trusted.https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

注意

不同的浏览器会使用不同的方法来捕获脚本激活的点击和真实用户之间的差异.

Different browsers trap the difference between a script activated cick and a real user using different methods.

在这种情况下，您可以做的是禁用文件输入按钮(或整个表单)并在ajax完成后启用.这样，用户将不会单击上载按钮，直到ajax请求完成为止.到现在为止，没有其他方法可以一键完成两个操作，因为打开弹出窗口也有时间限制.当我检查Chrome的时间范围是1000毫秒.用户操作1000毫秒后，窗口将不会打开.

What you can do in this scenario is to disable the file input button(or the entire form) and enable after ajax is done. That way the user wont click on the upload button until the ajax request gets completed. As of now there is no other way to do both in one click since there is a timeframe limit also for opening popup. When I checked in chrome the timeframe is 1000ms. 1000ms after the user action, window will not get opened.

这篇关于触发对异步ajax done()上input = file的单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！