jQuery-File-Upload iframe后备检测

Question

Using blueimp's jQuery-File-Upload at https://github.com/blueimp/jQuery-File-Upload

My application is running on many older browsers. File uploading has a long list of compatibility constraints. I'd like to simply detect when the fileuploader has gracefully fallen back to using iframe transport. I would like to detect this in the jQuery where the fileupload is being used similar to this example:

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
}

It is possible to use this code in the 'progress', 'done', or 'always' callback:

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

However these callbacks are not always made as reported at https://github.com/blueimp/jQuery-File-Upload/issues/461#issuecomment-9299307

My biggest concerns are supporting IE6 and Android 2.3 default browser. Thanks!

Answer 1

Looks like the method that controls whether iframe is used or not is _initDataSettings which uses _isXHRUpload to determine whether to use it or not. Since this is a private method and cannot be called externally, you can use the following:

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

If use_xhr is false iframe transport is used.

Alternatively, if you are ok with waiting until the send event, you can look at data.dataType, if it starts with "iframe", you are using the iframe fallback.

Answer 2

1. It's possible. However, it must be done within the asynchronous context of the fileupload plugin. If you wish to use your boolean variable using_iframe_transport , it must be used in the context of a callback within the plugin . Use a console.log in each block to see which executes first.

2. I would try using the add callback, as it is called as soon as a file is added.

    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 }