Загрузка файла jQuery: динамическое изменение URL-адреса загрузки

Я пытаюсь использовать файл blueimp jQuery File Upload в своем проекте. Это удовлетворяет мои потребности достаточно хорошо, но мне нужно изменить файлы url, которые загружаются динамически после создания и настройки плагина. Я провел много исследований, но, к сожалению, не нашел ничего полезного. В общем, у меня есть кнопка для выбора файлов и действий с файловой загрузкой, охватывающих фактическую загрузку. Основное создание выглядит следующим образом:

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

И сама конфигурация:

 function FileUploadConfig() {

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

     //... some other code
 }

То, что мне нужно сделать, это изменить URL-адрес в этом конфиге, а затем вызвать data.submit(). Я узнал, что эта конфигурация сохраняется с помощью $.data() и пытается решить проблему с таким кодом

// 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();

Однако это не работает так, как я хотел.

Любые идеи о том, как это сделать?

Ответ 1

Просто возьмите это здесь для потомков.

В текущем jQuery-upload rev переопределите функцию add (evt, data) и задайте свойство url для объекта данных:

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

Ответ 2

Я выполнил это, когда захотел загрузить файл на URL с другим параметром id, установив autoupload в true и привязывая обратный вызов fileuploadstart:

<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();

        });
    });

Ответ 3

Вам нужно привязать событие fileuploadadd.

Предположим, что вы сохранили динамический url в скрытом входе с именем dynamicURL, тогда вы должны сделать это:

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

Ответ 4

Вот общий пример того, как вы можете это сделать:

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

Я использую это, чтобы изменить URL-адрес на основе результата, возвращаемого загрузкой script, поэтому я устанавливаю new_url = data.result.new_url в начале выполненного обратного вызова.

Ответ 5

В дополнение к ответу davbryn: Эта строка

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

следует заменить на

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

Ответ 6

Чтобы добавить к ответу davbryn:

Я думаю, что событие, к которому вы привязаны, должно быть в файлеuploadadd, поскольку файлuploadstart не дает вам никаких данных, он просто дает вам событие.

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

Ответ 7

Это должно сделать это, (похоже на ответ @Aneon), похоже, работает для меня:

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();

Отправка формы в любой момент после вызова этой функции будет использовать новый URL

(мой код отправляется сразу после выбора изображения, не проверял вызов отправки вручную).

Ответ 8

Отменить регистрацию плагина от элемента, а затем зарегистрировать его снова с помощью нового URL-адреса.

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

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

Ответ 9

Вам нужно добавить .bind('fileuploadsubmit'). См. Пример ниже:

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());
    });
}

Ответ 10

Привет, кажется, есть более простой способ сделать это. Я поставил свой код ниже. Базовая версия uplodify отсюда http://www.startutorial.com/articles/view/21

Теперь, что я сделал, я получаю значения для папки из переменной. И затем я загружаю функцию uploadify каждый раз, когда я нажимаю элемент списка ниже, эти элементы списка - это имена папок внутри корневого каталога загрузки. Поэтому, когда я нажимаю на них, я получаю это имя и добавляю его в фактический путь к папке и снова вызываю добавление.

Но если я продолжаю называть его снова и снова, на экране появится больше кнопок просмотра, поэтому я просто удалю элемент #file_uploadUploader перед вызовом uploadify. Поэтому я думаю, проблема решена. по крайней мере для меня:)

Он искал это в течение последних двух дней, но, наконец, чувствует себя хорошо, чтобы решить это сам. Б -)

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
});




});