Я использую отличный плагин – dropzone.js (dropzonejs.com), чтобы сделать мой сайт немного более причудливым при регистрации нового пользователя.
В принципе, пользователь заполняет форму, бросает пару изображений в «dropzone» и нажимает «Submit», что вызывает вызов ajax, который отправляет форму в php-скрипт.
У меня есть параметры dropzone, установленные в enqueForUpload: false, что позволяет автоматически загружать файлы, так как мне нужно загрузить их в uploads / $ userid после создания нового идентификатора пользователя. Я могу предоставить параметры заголовка dropzone, который я беру на URL-адрес, похожий на вызов ajax, вместо данных: {'userid': userid}, dropzone использует заголовки: {'userid': userid} … Однако , dropzone получает инициализацию на document.ready, и поскольку переменная userid еще не объявлена, dropzone не инициализируется.
Я предполагаю, что мне нужно будет инициализировать dropzone с document.ready, но пока не давайте заголовки. Затем после того, как обработка формы ajax будет успешной и вернет идентификатор пользователя, вызовите dropzone для загрузки и передайте ему заголовки в этот момент. Проблема в том, что я не знаю, какой код нужно вызвать, чтобы это произошло.
Инициализировать Dropzone на готовом:
$(document).ready(function(){ $('#dropzone').dropzone({ url: 'dropzoneprocess.php', maxFilesize: 1, paramName: 'photos', addRemoveLinks: true, enqueueForUpload: false, }); }); Затем…
$('#submit').on('click', function(){ validation crap here $.ajax({ type: 'post', url: 'postform.php', data: {'various': form, 'values': here} datatype: 'json', success: function(data){ var userid = data.userid; /* (and this is what I can't figure out:) tell dropzone to upload, and make it post userid to 'dropzone.php' */ }); });
Если вы используете последнюю версию enqueueForUpload параметр enqueueForUpload был удален, в пользу autoProcessQueue который упрощает всю очередь.
Поэтому просто вызовите myDropzone.processQueue() как только вы захотите загрузить все файлы.
Чтобы добавить дополнительные параметры в XHR вы можете просто зарегистрировать событие sending , которое получает объект xhr как second и formData качестве третьего параметра, и добавьте данные самостоятельно. Что-то вроде этого:
myDropzone.on("sending", function(file, xhr, formData) { // add headers with xhr.setRequestHeader() or // form data with formData.append(name, value); });
Я использовал ответ enyo, но я использовал множество dropzones с атрибутом data-id на моей странице, поэтому использовал:
$('div.dropzone').dropzone({ url: 'img.php' }); var sendingHandler = function(file, xhr, formData) { formData.append('id', $(this.element).data('id')); }; $('div.dropzone').each(function() { Dropzone.forElement(this).on('sending', sendingHandler); });