jQuery-File-Upload iframe 后备检测

Posted 2023-05-07

【中文标题】jQuery-File-Upload iframe 后备检测

【英文标题】：jQuery-File-Upload iframe fallback detection

【发布时间】：2013-05-25 23:21:00

【问题描述】：

使用 blueimp 的 jQuery-File-Upload https://github.com/blueimp/jQuery-File-Upload

我的应用程序在许多旧版浏览器上运行。文件上传有很长的兼容性限制列表。 我想简单地检测文件上传器何时优雅地回落到使用 iframe 传输。 我想在使用文件上传的 jQuery 中检测到这一点，类似于此示例：

var using_iframe_transport = false;

this_file_input.fileupload(
  dataType: 'json',
  url: "http://api.cloudinary.com/v1_1/my_account/image/upload",

  //as we send the file upload, record whether it is using iframe
  send: function (e, data) 
    if (e.iframe_fallback) //is there a variable like this that exists in the plugin?
      using_iframe_transport = true;
    
  
);//end fileupload

if (using_iframe_transport)
  //do something

可以在 'progress'、'done' 或 'always' 回调中使用此代码：

...
  progress: function(e) //or 'done' or 'always'
    if($('iframe').length)
      using_iframe_transport = true;
    
  
...

但是，这些回调并不总是像 https://github.com/blueimp/jQuery-File-Upload/issues/461#issuecomment-9299307 报告的那样进行

我最大的担忧是支持 IE6 和 android 2.3 默认浏览器。谢谢！

【参考方案1】：

看起来控制是否使用iframe的方法是_initDataSettings，它使用_isXHRUpload来确定是否使用它。由于这是一个私有方法，不能被外部调用，所以可以使用如下：

options = this_file_input.fileupload('option');
use_xhr = !options.forceIframeTransport &&
            ((!options.multipart && $.support.xhrFileUpload) ||
            $.support.xhrFormDataFileUpload);

如果 use_xhr 为 false，则使用 iframe 传输。

或者，如果您可以等待发送事件，您可以查看 data.dataType，如果它以“iframe”开头，则您正在使用 iframe 回退。

【讨论】：

在发送事件中使用if(data.dataType.indexOf('iframe') >= 0) 效果很好。谢谢！

【参考方案2】：

这是可能的。但是，它必须在 fileupload 插件的异步上下文中完成。如果您希望使用布尔变量using_iframe_transport，则必须在插件内回调的上下文中使用它。在每个块中使用console.log 来查看哪个首先执行。

我会尝试使用add 回调，因为它会在添加文件后立即调用。

var using_iframe_transport = false;

this_file_input.fileupload(
  dataType: 'json',
  url: "http://api.cloudinary.com/v1_1/my_account/image/upload",

  //as we send the file upload, record whether it is using iframe
  send: function (e, data) 
    if (e.iframe_fallback) //is there a variable like this that exists in the plugin?
      /*
        This is being set within the asynchronous context of the plugin.
      */
      using_iframe_transport = true;
    
  
);//end fileupload

/*
  This is a synchronous process and is being evaluated prior 
  to the plugin callbacks being executed. This logic needs to be
  used within a callback function.
*/
if (using_iframe_transport)
  //do something

【讨论】：

这很重要。我的示例代码是一个糟糕的例子。