Как отправить данные формы вместе с файлами dropzone через ajax?
Я новичок в jquery и dropzone.
У меня есть проблема, связанная с dropzone.js. Я должен отправить данные формы (например, custome_name, id, DOB и т. Д.) Вместе с файлами изображений, помещенными в dropzone.
Как я могу отправить строку данных вместе с файлами dropzone по событию с одним нажатием кнопки, используя AJAX для сценария PHP?
Заранее спасибо. Ваша маленькая поддержка будет очень заметна.
Решение
Согласно чаевые раздел документации Dropzone.js,
Dropzone отправит любые скрытые поля, которые у вас есть в форме Dropzone.
Так что это может быть вариантом для вас. Кроме того, вы также можете указать дополнительные данные с помощью params вариант, который может выглядеть примерно так:
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
params: {
customer_name: 'Jeffrey Lebowski',
dob: '1949-11-20',
...
},
...
};
Это не задокументировано очень хорошо, поэтому я только угадывание как Dropzone.options подход будет работать.
Другие решения
Я опаздываю, но если есть кто-то с такой же проблемой, я решил ее совсем по-другому.
Я использую Dropzone только для UX для пользователя и предоставляю функцию перетаскивания на свой сайт, но я хотел отправить всю информацию сразу в одну кнопку.
Сначала я инициализирую свою зону dropzone, в моем случае я использовал div, а не форму для хранения dropzone.
$animalImage = new Dropzone('div#animalImage', {
// url: '/file/post',
addRemoveLinks: true,
//thumbnailWidth: "100",
//thumbnailHeight: "100",
uploadMultiple: true,
autoProcessQueue: false,
parallelUploads: 4,
maxFilesize: 4,
maxFiles: 4,
maxfilesexceeded: function (files) {
this.removeAllFiles();
this.addFile(files);
},
acceptedFiles: '.png,.jpg,.jpeg',
dictDefaultMessage: '<span class="text-center"><i class="fa fa-cloud-upload text-info" style="margin-right:5px"></i>' +
'Arrastra una imagen <span class="font-xs">para guardar</span></span><span>  ' + '<h4 class="display-inline"> (O Click Aquí)</h4></span>',
//dictResponseError: 'Error al subir imagen',
dictRemoveFile: '<i class="fa fa-times-circle" style="font-weight: 900; cursor:pointer;"></i>'
});
Затем я объявил и массив (это способ, которым я ожидаю получить его в моем контроллере и модели) извлек все файлы в моей функции сохранения, dropzone позволяет вам получить доступ к его скомпилированным данным для каждого изображения, и добавил его в мои изображения массива.
images = [];
for (var i = 0; i < $animalImage.files.length; i++) {
images.push($animalImage.files[i]);
}
В последний раз я добавил его в свой объект json.
animal.Pictures = images;
В конце своей модели я получил всю свою информацию, содержащую мою форму и массив изображений dropzone, как я и ожидал.
Надеюсь, поможет.