Моя проблема в том, что я должен комбинировать нормальную форму с dropzone.js для загрузки перетаскивания. После того, как пользователь нажимает кнопку отправки, тогда ajax-запрос отправляет данные в php-скрипт, если на входах есть значения.
Но как я могу комбинировать файлы с помощью dropzone и ajax-request? Я бы послал оба, когда пользователь нажимает кнопку. Если я перетащил файл в зону, то файл будет отправлен.
autoProcessQueue: false Это сделает так, что файл не будет отправлен, если пользователь перетащит файл в зону.
Требуемое решение: Пользователь заполняет форму, перетаскивает файл в зоне и, если пользователь нажимает кнопку, то значения и файлы будут отправляться с помощью ajax-запроса.
Некоторая демонстрация для кода: http://jsfiddle.net/wQP5B/
У меня также была та же проблема, но я решил это. Вы можете проверить эту ссылку из dropzone -> https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone
Они дали то, что вы хотите, но есть некоторые вещи, которые нужно добавить в том, что они дали, поскольку не делают всю форму кликабельными и другими вещами. Код ниже отлично работает для меня
form.html
<form method="post" action="upload.php" class="dropzone" id="mydropzone" enctype='multipart/form-data'> //remember we gave an id mydropzone to the form <label>Username:<input type="text" name="uname"/> </label> <label>Password:<input type="text" name="pass"/> </label> //this will the dropzone drag and drop section. //notice we have given it an id dropzonePreview. <div id="dropzonePreview"></div> <input type="button" id="sbmtbtn" value="submit"/> //we have given id sbmtbtn to the button </form> <script> Dropzone.options.mydropzone = { //url does not has to be written //if we have wrote action in the form //tag but i have mentioned here just for convenience sake url: 'upload.php', addRemoveLinks: true, autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button autoDiscover: false, paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file'] previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable accept: function(file, done) { console.log("uploaded"); done(); }, error: function(file, msg){ alert(msg); }, init: function() { var myDropzone = this; //now we will submit the form when the button is clicked $("#sbmtbtn").on('click',function(e) { e.preventDefault(); myDropzone.processQueue(); // this will submit your form to the specified action path // after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual //REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that }); } // init end }; </script>
ПРИМЕЧАНИЕ . ВАМ НЕ ДОЛЖНЫ делать какие-либо причудливые вещи в файле php. Просто напишите, что вы обычно пишете в PHP для загрузки файлов и ввода.
Посмотрите, работает ли это для вас.