jquery - 文件上传两次到不同的服务器？

Question

我想制作两个 jQuery 文件上传处理程序 - 一个到服务器 1，另一个到服务器 2。像这样:

$('#fileupload').fileupload({
              url: 'server1',
              type: 'POST',
              autoUpload: true,
              formData: {
                  ....
              }
          })

$('#fileupload').fileupload({
                              url: 'server2',
                              type: 'POST',
                              autoUpload: true,
                              disableImageResize: false,
                              imageMaxWidth: 200,
                              imageMaxHeight: 200
                          })

然而，当我这样做时，只有第二个处理程序被调用，因此只有第二个服务器接收文件。如何让两台服务器都收到文件？

更新:

有些人指出这些调用是异步的，这是真的 - 但回调方法也不起作用，这就是我需要帮助的原因:

$('#fileupload').fileupload({
                  url: 'server1',
                  type: 'POST',
                  autoUpload: true,
                  formData: {
                      ....
                  }
              }).on('fileuploadstop', function(){

                             $('#fileupload').fileupload({
                                  url: 'server2',
                                  type: 'POST',
                                  autoUpload: true,
                                  disableImageResize: false,
                                  imageMaxWidth: 200,
                                  imageMaxHeight: 200
                              })
});

编辑 2

我仍在努力 - 我越来越接近了，但我还没有完全明白。

我的目标是当用户添加文件时，它会上传到一个服务器，然后立即上传到具有不同设置的另一台服务器。

这是最近的一个实现 - 第一次有效，但第二次对两个服务器进行了多次调用。看起来即使我只初始化 fileupload() 一次(使用互斥量)并在第二次调用中小心取消我的生命周期回调，但下次有人上传文件时它仍然会双重触发。有什么想法吗？

  <form id="form_file_upload" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" id="fileupload" name="file" multiple>
    <input type="submit" value="Upload">
  </form>

$(function() {
  $('#fileupload').on('change', function(){
      var fileUploadAddFn = function (e, data) {
          // lifecycle callback
          // do stuff
      };

      var fileSetupFirstUpload = function (){
          $('#fileupload').fileupload( // initialize first server
                  'option',
                  {
                      url: 'server1',
                      type: 'POST'
                  }
          );
          $('#fileupload').on('fileuploadaddfn', fileUploadAddFn); // set a lifecycle callback for 1st upload
      };

      var fileSetupSecondUpload = function() {
          $('#fileupload').fileupload( // initialize first server
                  'option',
                  {
                      url: 'server2',
                      type: 'POST'

                  }
          );
          $('#fileupload').off('fileuploadaddfn');
          $('#fileupload').off('fileuploadstop');
      }

      var filesToUpload = $('#fileupload')[0].files; // this works since fileupload is not yet initialized
      if(typeof fileUploadInitialized == 'undefined'){
          $('#fileupload').fileupload();
          fileUploadInitialized = true; // global mutex to only initialize once
      }

      fileSetupFirstUpload();
      $('#fileupload').on('fileuploadstop', function (e, data) {
        fileSetupSecondUpload();
        $('#fileupload').fileupload('add', {files: filesToUpload});
        $('#fileupload').fileupload('send');
      });

      $('#fileupload').fileupload('add', {files: filesToUpload});
      $('#fileupload').fileupload('send');
  });

Answer 1

尝试

$('#fileupload').fileupload(); // init
$("#fileupload").on("change", function (e) {
    e.preventDefault();
    // `File` object reference
    var file = e.target.files[0];
    // settings
    var settings = [{
        "files": file,
        "url": "/echo/json/" // `server1`
        //, additional settings
    }, {
        "files": file,
        "url": "/echo/json/" // `server2`
        //, additional settings
    }];
    var request = function (_settings) {
        var jqxhr = $('#fileupload').fileupload('send', _settings);
        return jqxhr
    };

    $.when.apply($(e.target), // set `this`
        $.map(settings, function (data) {
            return request(data)
            .success(function (result, textStatus, jqXHR) {
                // do stuff ,
                // return promise to `then`
                return jqXHR
            })
            .error(function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                return errorThrown // return `errorThrown` to `then`
            })
            .complete(function (result, textStatus, jqXHR) {
                /* ... */
            });
        })
    ).then(function (upload1, upload2) {
        console.log(upload1, upload2, this) // `this` : `$("#fileupload")`
    }, function (err) {
        console.log(err)
    });

});

jsfiddle http://jsfiddle.net/guest271314/8hms1t4k/