Я использую в первый раз dropzone.js внутри другой формы … так как две формы не могут быть вложенными, я удалил форму Dropzone:
html-фрагмент:
<form id="addproduct" name="addproduct" action="receiveAddForm" method="post" enctype="multipart/form-data"> <fieldset class="form-horizontal"> <div class="form-group"> <div class="col-sm-2"> <small class="text-navy"><b>* Campos Obligatorios</b></small> </div> </div> <div class="form-group"><label class="col-sm-2 control-label">Nombre (Modelo) *:</label> <div class="col-sm-10"><input name="name" type="text" class="form-control"></div> </div> </fieldset> <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div> </form> js snippet:
Dropzone.options.myAwesomeDropzone = { autoProcessQueue: false, uploadMultiple: true, parallelUploads: 100, maxFiles: 3, addRemoveLinks: true, maxFilesize: 10, url: 'receiveAddForm', init: function() { var myDropzone = this; $("#submit_form").click(function (e) { e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); this.on("sendingmultiple", function() { }); this.on("successmultiple", function(files, response) { }); this.on("errormultiple", function(files, response) { }); this.on("maxfilesexceeded", function(file){ // alert("No more files please!"); }); this.on("uploadprogress", function(file, progress) { console.log("File progress", progress); }); } }
поэтому на стороне сервера я получаю это после повторения $ _FILES:
array (size=1) 'files' => array (size=5) 'name' => string '' (length=0) 'type' => string '' (length=0) 'tmp_name' => string '' (length=0) 'error' => int 4 'size' => int 0
что, кажется, проблема здесь? мой php.ini установлен на 1000 МБ при максимальном размере файла загрузки, ограничении памяти и т. д. … любая помощь будет оценена!
'error' => int 4 означает, что файл не был загружен, я думаю, что это потому, что вы отправляете форму, как если бы она была обычной формой, если вы хотите включить dropzone внутри обычной формы, я не думаю, что вы может подать форму обычным способом и приложить к ней файлы, сброшенные в элемент dropzone, или, по крайней мере, нет простого способа сделать это, одним из решений может быть кодирование файла в base64, а затем добавление закодированной строки на вход отправлять.
Но простой, я думаю, это отправить форму с помощью dropzone и добавить входные значения к запросу, используя javascript, здесь общий пример.
HTML:
<form id="addproduct"> <label>Input 1: </label> <input type="text" name="input1"> <label>Input 2: </label> <input type="text" name="input2"> <div id="myAwesomeDropzone" class="dropzone"></div> </form> <button type="button" id="submit_form">Submit</button>
ЯШ:
Dropzone.options.myAwesomeDropzone = { url: 'receiveAddForm', autoProcessQueue: false, uploadMultiple: true, parallelUploads: 3, maxFiles: 3, init: function () { var myDropzone = this; $('#submit_form').on("click", function() { myDropzone.processQueue(); }); this.on("sending", function(file, xhr, formData){ $('#addproduct').find('input').each(function() { formData.append( $(this).attr('name'), $(this).val() ); }); }); this.on("success", function(file, response) { console.log(response); }); this.on("completemultiple", function(files) { // Here goes what you want to do when the upload is done // Redirect, reload , load content ...... }); }, };
receiveAddForm (php):
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { echo "RECEIVED ON SERVER: \n"; print_r($_FILES); print_r($_POST); }
Файл сервера просто печатает данные, полученные на сервере, поэтому вы можете увидеть их в консоли браузеров. Я пропустил классы и элементы начальной загрузки только для отображения соответствующей части, но вы не добавляете их в проблему.
чтобы иметь dropzone внутри другой формы, вы можете поместить div в форму с классом = «dropzone» и преобразовать его в элемент dropzone следующим образом:
Dropzone.autoDiscover = false; var myDropzone = new Dropzone("#my-awesome-dropzone", { autoProcessQueue: false, url: "receiveAddForm", // other options });
то вы можете вызвать события следующим образом:
myDropzone.on("addedfile", function(file) { console.log("File added:", file.name); });
jsfiddle с вашей формой: скрипка