Я пытаюсь создать перетаскивание изображения с вытаскиванием, но параметры dropzone не работают, и я не знаю, правильно ли я это сделаю.
Я хотел бы настроить следующие параметры:
Загрузите только один файл (параметр multiupload)
Возможность удалить этот файл (addremovelink?)
Максимальный размер файла 2mb (maxfilesize)
Не могли бы вы мне помочь?
вот код:
<html> <head> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="dropzone.js" type="text/javascript"></script> <link href="css/basic.css" rel="stylesheet" type="text/css" /> <link href="css/dropzone.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("#uploadme").dropzone({ paramName: 'photos', url: 'upload.php', dictDefaultMessage: "Drag your images", clickable: true, enqueueForUpload: true, maxFilesize: 1, uploadMultiple: false, addRemoveLinks: true }); }); </script> <form action="upload.php" class="dropzone"> <div id="uploadme" class="fallback"> <input name="file" type="file" multiple /> </div> </form> </body> </html> Спасибо, ребята, вы рок! 🙂
Просто добавьте перед вызовом Jquery
Dropzone.autoDiscover = false;
и удалите действие из <form> . Это отключит функцию автоматического обнаружения, чтобы вы могли указать все параметры для своей формы.
Вот как выглядит ваш код:
<html> <head> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="dropzone.js" type="text/javascript"></script> <link href="css/basic.css" rel="stylesheet" type="text/css" /> <link href="css/dropzone.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> $(document).ready(function(){ Dropzone.autoDiscover = false; $("#uploadme").dropzone({ paramName: 'photos', url: 'upload.php', dictDefaultMessage: "Drag your images", clickable: true, enqueueForUpload: true, maxFilesize: 1, uploadMultiple: false, addRemoveLinks: true }); }); </script> <form action="" class="dropzone"> <div id="uploadme" class="fallback"> <input name="file" type="file" multiple /> </div> </form> </body> </html>
maxFilesize: 2, uploadMultiple: false, addRemoveLinks: true, maxFiles: 1, autoProcessQueue: false
Вам нужно будет добавить кнопку или обработчик событий, чтобы разрешить обработку предварительно просмотренного файла, если вы позволите автопроцессуQueue у вас нет времени, чтобы решить, хотите ли вы файл или нет, если вы не добавите обработчик событий в «процесс» " мероприятие.
$("#uploadme").dropzone.processQueue()
В моей ситуации мне пришлось использовать экземпляр класса Dropzone от Vanilla JS и поставить Dropzone.autoDiscover = false; за пределами функции $(document).ready .
HTML:
<form id="image-upload" action="/upload" class="dropzone" method="post" name="file"></form>
JavaScript:
<script> Dropzone.autoDiscover = false; $(document).ready(function() { var myDropzone = new Dropzone('form#image-upload',{ maxFiles:12, acceptedFiles: 'image/*', dictInvalidFileType: 'This form only accepts images.' }); });