Я использую Загрузку файлов BlueImp Jquery, чтобы добавить возможности загрузки файлов в существующую форму. Плагин отлично работает, когда файлы выбраны, т. е. когда вы всегда загружаете некоторые файлы с помощью формы, но в моем случае я хочу, чтобы часть загрузки файлов была необязательной, чтобы пользователь мог отправить форму, просто текстовые входы заполнены.
Вопрос о том, как разрешить загрузку файлов, задавался несколько раз как в Stack Overflow (ref 1, ссылка 2) и в самом проекте GitHub (ref) без подходящих ответов, поэтому сейчас я пытаюсь решить эту проблему немного по-другому.
Единственный способ, который я могу придумать, - это создать отдельную кнопку отправки, которая сначала обрабатывает «нормальные» (без загрузки файлов) поля формы с помощью вызова AJAX, а затем в случае успеха программно запускает загрузку файлов в отдельный процесс. Далеко не идеальный, но единственный способ заставить процесс работать.
У меня есть текстовая часть сообщения формы и часть сообщения для загрузки файлов, работающая сейчас, но загружается только первый файл, если я выбираю несколько файлов на входе, предположительно это связано с тем, что функция, которая создает массив файлов на Событие изменения ввода может обнаружить только один файл на вход, хотя их может быть много.
Вот код:
$(function () {
'use strict';
var myFiles = new Array();
$('.files').bind('change', function (e) {
var f;
f = e.target.files || [{ name: this.value }];
myFiles.push(f[0]);
});
// Initialize the jQuery File Upload widget:
$('#fileupload1').fileupload({
url: '/something/api/UploadApi/PostFiles',
singleFileUploads: false
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload1').fileupload(
'option',
'redirect',
window.location.href.replace(/\/[^\/]*$/, '/cors/result.html?%s')
);
// Start things off when submit button clicked
$('#messageSubmit1').click(function () {
var message = $('textarea', form).val();
if (!message) {
alert('Please enter a message!');
return false;
}
// Post text data
$.ajax({
url: '/something/api/MessageApi/AddMessage/',
data: {
'message': message
},
dataType: 'xml',
success: function (responseXML) {
// When text data saved successfully, post files
$('#fileupload1').fileupload('send', { files: myFiles });
}
});
return false;
});
Может ли кто-нибудь увидеть, как это работает, или предложить лучший подход. Это кажется очень хакерским, но я совершенно ничего не нашел в поисках решения этой (казалось бы, довольно распространенной) проблемы.
Большое спасибо!