jQuery File Upload: how to change the upload url dynamically

问题

I'm trying to use the blueimp jQuery File Upload in my project. It suits my needs fairly well but I need to change the url files are uploaded to dynamically after the plugin is created and configured. I've done a good deal of investigation, but, unfortunately, found nothing useful. In general, I have a button to choose files and fileupload action covering the actual upload. The basic creation looks like this:

 $('[upload-button]').fileupload(new FileUploadConfig())

And configuration itself:

 function FileUploadConfig() {

     // is set to a unique value for each file upload
     this.url = 'temporary';
     this.fileInput = $('[upload-button]');

     //... some other code
 }

The thing I need to do is change the url in this config and then call data.submit(). I've found out, that this configuration is saved using $.data() and tried to solve the problem with such code

// get the current fileupload configuration
var config = $.data($('[upload-button]').get(0), 'fileupload');

// change the url configuration option
config.options.url = file.link;

//send a file
data.submit();

However, this does not work the way I wanted.

Any ideas on how to accomplish this?

回答1:

Just capturing this here for posterity.

In the current jQuery-upload rev, override the add(evt,data) function and set the url property of the the data object:

fileupload({
   add: function(e, data) {
      data.url = 'customURL'
      ...
   },
   ...
}

回答2:

You need to bind the fileuploadadd event.

Suppose you saved the dynamic url in an hidden input called "dynamicURL" then you should do this:

$('#fileupload').fileupload({
    // Other options here
}).bind('fileuploadadd', function (e, data) {
    data.url = $('input[name="dynamicURL"]').val();
});

回答3:

I've accomplished this when I wanted to have a file upload to a url with a different id param by setting autoupload to true and binding the fileuploadstart callback:

<script type='text/javascript'>
    $(function () {
        'use strict';
        $('#fileupload').fileupload({
            url: 'originalurl/dest/1'
            autoUpload: true            
        }).bind('fileuploadadd', function (e, data) {
            var that = $(this).data('fileupload');              
            that.options.url = 'originalurl/dest/' + $("#selctedlocation").val();

        });
    });

回答4:

In addition to davbryn's answer: This string

var that = $(this).data('fileupload');

should be replaced by this

var that = $(this).data('blueimpFileupload');

回答5:

You need to add .bind('fileuploadsubmit') part. See example below:

function fnFileUpload(id, urlFunc, successurl) {
    $(id).fileupload({
        url: urlFunc(),
        dataType: 'json',
        maxFileSize: 10000000,
        singleFileUploads: true,
        done: function (e, data) {
            $(this).fileupload('option', 'url', urlFunc());
            if (data.result.respType == 'S') {
                window.location.href = successurl;
            } else {
                toastr.error(data.result.respDesc, data.result.respTitle);
                var progress = 0;
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).bind('fileuploadsubmit', function (e, data) {
        $(this).fileupload('option', 'url', urlFunc());
    });
}

回答6:

Here's a general example how you might do this:

$('#fileupload').fileupload({
    url: initial_url,
    done: function (e, data) {
        $(this).fileupload('option', 'url', new_url);
    }
});

I use this to change the URL based on the result returned by the upload script, so I set new_url = data.result.new_url in the beginning of the done callback.

回答7:

To add to davbryn's answer:

I think the event you're binding to should be on a fileuploadadd as fileuploadstart does not give you any data, it just gives you an event.

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

回答8:

This should do it, (similar to @Aneon's answer) seems to work for me:

var file = { link: "http://thenewurl" };

// I used a form element to create the fileupload widget
$('[upload-button]').fileupload("option", "url", file.link);

// Submit the form
$('[upload-button]').submit();

Submitting the form at any point after this function call will use the new url

(my code submits as soon as the image is selected, haven't tested the manual submit call).

回答9:

Unregister the plugin from the element and then register it again with a new URL.

$('#pictureUpload, #pictureUpload *').unbind().removeData();

$('#pictureUpload').fileupload({
...
});

回答10:

Hi there seems to be a simpler way to do it. I've put my code below. The base version of uplodify is from here http://www.startutorial.com/articles/view/21

Now what I've done is I am getting the values for folder from a variable. And then I load the uploadify function everytime I click the lists item below, these list items are foldernames inside the root upload directory. So when i click them i get that name and append it to the actual folder path and call the uploadify again.

But then if i keep calling it again and again, there will be more browse buttons appeding on the screen so I just removed the element #file_uploadUploader before calling the uploadify. So i guess the problem is solved. at least for me :)

Been searching for this for the past two days but finally feels good to solve it myself. B-)

HTML

<input id="file_upload" name="file_upload" type="file" />

jerry1
jerry3
jerry2

Jquery

$(document).ready(function() {

var uploadfer = 'uploads/jerry2';


$("ul li").click(function(){
uploadfer = "uploads/"+$(this).text()+"/";
alert(uploadfer);

$('#file_uploadUploader').remove();

$('#file_upload').uploadify({
'uploader'  : 'js/uploadify.swf',
'script'    : 'upload.php',
'cancelImg' : 'js/cancel.png',
'folder'    : uploadfer,
'auto'      : true
});


});

$('#file_upload').uploadify({
'uploader'  : 'js/uploadify.swf',
'script'    : 'upload.php',
'cancelImg' : 'js/cancel.png',
'folder'    : uploadfer,
'auto'      : true
});




});

来源：https://stackoverflow.com/questions/12987066/jquery-file-upload-how-to-change-the-upload-url-dynamically

标签

jquery

jquery-plugins