Я нашел решения о том, как добавить дополнительные данные формы при отправке формы загрузки файла. Этот вопрос заключается в том, как загрузить дополнительные данные, если нет файла для загрузки.
Я использую blueimp jquery-file-upload в приложении для управления задачами, чтобы перетаскивать файлы и прикреплять их к задаче.
Сценарий инициализирован и настроен так, чтобы не загружать автоматически при прикреплении файлов. При обратном вызове fileuploadadd
я присоединяю data.submit()
к моему обработчику событий submit
. Это достигается тем, что мы отправляем данные задачи и файлы в одном запросе POST.
Пока файлы не добавлены, я не могу получить доступ к загрузке файлов data
для использования функции data.submit()
. Я придумал обходной путь, добавив пустой файл (а затем удалив его) при загрузке страницы, что вызовет привязку data.submit()
к кнопке отправки. Проблема в том, что плагин возвращает ошибку при попытке просмотреть пустой массив файлов. Эта проблема также может возникнуть, если вы добавили файл, а затем удалили его перед отправкой формы.
Я некоторое время искал решение этой проблемы и искал все выше и ниже, но ничего не нашел в (ИМХО) ужасной документации.
Посмотрите на мой код ниже:
$('#post_task').fileupload({
autoUpload: false,
singleFileUploads: false,
disableImagePreview: true,
}).on('fileuploadadd', function (e, data) {
$.each(data.files, function (index, file) {
var filename = file.name,
filesize = bytesToSize(file.size)
ext = filename.substr(filename.lastIndexOf('.')+1,5),
icon = '<i class="sprite_file sprite_file-file_extension_'+ext+'"></i>',
node = $('<li/>').append($('<span/>').html(icon + filename + ' ' + filesize + '<a href="#">×</a>')).attr('data-index',index);
node.find('a').click(function(e){
e.preventDefault();
var $self = $(this),
$listItem = $self.parents('li'),
listIndex = $listItem.attr('data-index');
$listItem.remove();
$('#files li').attr('data-index',function(index){return index;});
data.files.splice(listIndex,listIndex);
console.log(data);
vardata = data;
});
$('#files').append(node);
});
$('#post_task').unbind('submit').submit(function(ev){
ev.preventDefault();
data.submit();
});
});