Я пытаюсь использовать файл 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();
Однако это не работает так, как я хотел.
Любые идеи о том, как это сделать?
Просто возьмите это здесь для потомков.
В текущем jQuery-upload rev переопределите функцию add (evt, data) и задайте свойство url для объекта данных:
fileupload({
add: function(e, data) {
data.url = 'customURL'
...
},
...
}
Я выполнил это, когда захотел загрузить файл на 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();
});
});
Вам нужно привязать событие fileuploadadd.
Предположим, что вы сохранили динамический url в скрытом входе с именем dynamicURL, тогда вы должны сделать это:
$('#fileupload').fileupload({
// Other options here
}).bind('fileuploadadd', function (e, data) {
data.url = $('input[name="dynamicURL"]').val();
});
Вот общий пример того, как вы можете это сделать:
$('#fileupload').fileupload({
url: initial_url,
done: function (e, data) {
$(this).fileupload('option', 'url', new_url);
}
});
Я использую это, чтобы изменить URL-адрес на основе результата, возвращаемого загрузкой script, поэтому я устанавливаю new_url = data.result.new_url в начале выполненного обратного вызова.
В дополнение к ответу davbryn: Эта строка
var that = $(this).data('fileupload');
следует заменить на
var that = $(this).data('blueimpFileupload');
Чтобы добавить к ответу davbryn:
Я думаю, что событие, к которому вы привязаны, должно быть в файлеuploadadd, поскольку файлuploadstart не дает вам никаких данных, он просто дает вам событие.
Это должно сделать это, (похоже на ответ @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
(мой код отправляется сразу после выбора изображения, не проверял вызов отправки вручную).
Отменить регистрацию плагина от элемента, а затем зарегистрировать его снова с помощью нового URL-адреса.
$('#pictureUpload, #pictureUpload *').unbind().removeData();
$('#pictureUpload').fileupload({
...
});
Вам нужно добавить .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());
});
}
Привет, кажется, есть более простой способ сделать это. Я поставил свой код ниже. Базовая версия uplodify отсюда http://www.startutorial.com/articles/view/21
Теперь, что я сделал, я получаю значения для папки из переменной. И затем я загружаю функцию uploadify каждый раз, когда я нажимаю элемент списка ниже, эти элементы списка - это имена папок внутри корневого каталога загрузки. Поэтому, когда я нажимаю на них, я получаю это имя и добавляю его в фактический путь к папке и снова вызываю добавление.
Но если я продолжаю называть его снова и снова, на экране появится больше кнопок просмотра, поэтому я просто удалю элемент #file_uploadUploader перед вызовом uploadify. Поэтому я думаю, проблема решена. по крайней мере для меня:)
Он искал это в течение последних двух дней, но, наконец, чувствует себя хорошо, чтобы решить это сам. Б -)
HTML
<input id="file_upload" name="file_upload" type="file" />
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
});
});