Я создаю форму зоны падения с помощью dropzone.js. Сначала я установил форму, чтобы автоматически загрузить файл, который работал отлично, но я адаптировал форму для работы только тогда, когда пользователь отправил данные, я добавил файл с именем custom_dropzone.js и форма появилась, но файлы так и не были загружены в Папка.
HTML-код (index.php)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <head> <link href="css/dropzone.css" type="text/css" rel="stylesheet" /> <script src="dropzone.min.js"></script> <script src="custom_dropzone.js"></script>
<!-- Now setup your input fields --> <input type="email" name="username" /> <input type="password" name="password" /> <button type="submit">Submit data and files!</button> </form> </body> </html>
upload.php
<?php $ds = DIRECTORY_SEPARATOR; //1 $storeFolder = '../upload_test/uploads'; //2 if (!empty($_FILES)) { $tempFile = $_FILES['file']['tmp_name']; //3 $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4 $targetFile = $targetPath. $_FILES['file']['name']; //5 $allowed = array('gif','png' ,'jpg'); $filename = $_FILES['file']['name']; $ext = pathinfo($filename, PATHINFO_EXTENSION); if(!in_array($ext,$allowed) ) { echo 'error'; } move_uploaded_file($tempFile,$targetFile); //6 } ?>
NEW JS custom.dropzone.js, который, кажется, нарушает функцию upload.php
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element // The configuration we've talked about above autoProcessQueue: false, uploadMultiple: true, parallelUploads: 3, maxFiles: 3, previewsContainer: ".dropzone-previews", accept: function(file, done) { console.log("uploaded"); done(); }, init: function() { this.on("maxfilesexceeded", function(file){ alert("No more files please!"); }); }, // The setting up of the dropzone init: function() { var myDropzone = this; // First change the button to actually tell Dropzone to process the queue. this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { // Make sure that the form isn't actually being sent. e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead // of the sending event because uploadMultiple is set to true. this.on("sendingmultiple", function() { // Gets triggered when the form is actually being sent. // Hide the success button or the complete form. }); this.on("successmultiple", function(files, response) { // Gets triggered when the files have successfully been sent. // Redirect user or notify of success. }); this.on("errormultiple", function(files, response) { // Gets triggered when there was an error sending the files. // Maybe show form again, and notify user of error }); } }
спасибо за помощь. Мне просто нужен файл для загрузки, все остальное, кажется, отлично работает
Вы забыли добавить enctype='multipart/form-data' в вашу <form> как атрибут, а тип метода – POST .
Добавьте вот так ..
<form id="my-awesome-dropzone" method='post' class="dropzone" action="upload.php" enctype='multipart/form-data'>
С dropzone кажется, что вам не нужен метод = 'post' enctype = 'multipart / form-data', как то, что было упомянуто Шанкаром … но спасибо
Я решил это, комментируя нижнюю строку js из custom_dropzone.js
// uploadMultiple: true,