за последние несколько дней я пытался внедрить Dropzone в свою форму, но до сих пор мне не удавалось выяснить, как заставить его загружать и обрабатывать изображения только при нажатии кнопки отправки. Поэтому я решил приехать сюда и попросить вас, ребята, о помощи.
Я сделал примерную структуру кода, поэтому вы можете только взглянуть на то, что нужно. Прямо сейчас, я думаю, что он должен работать, когда я помещаю некоторые фотографии в Dropzone и нажимаю кнопку, которая запускает функцию collect_input с контроллера. Но я не знаю, как обрабатывать файлы и т. Д. Итак, я предполагаю, что я прошу, это совет / решение о том, как обрабатывать файлы из формы, например. Сохранение их в папку и добавление записи в базу данных.
Я отправлю код ниже, и если у кого-нибудь из вас есть какие-либо советы или решения, поделитесь ими со мной. Я хотел бы поблагодарить всех вас за то, что вы даже прочитали это и за ваши ответы. Btw Я работаю в CodeIgniter.
[Загрузить весь проект (css, js & php] http://puu.sh/5eqLc.zip
HTDOCS / приложение / контроллеры / test.php
<?php class Test extends CI_Controller { public function __construct() { parent::__construct(); } public function index() { $this->load->view('test_view'); } public function collect_input() { } } HTDOCS / приложение / контроллеры / test_view.php
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf=8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script> <!-- Load DropZone --> <link href="<?php echo base_url(); ?>/css/basic.css" type="text/css" rel="stylesheet" /> <link href="<?php echo base_url(); ?>/css/dropzone.css" type="text/css" rel="stylesheet" /> <script src="<?php echo base_url(); ?>js/dropzone.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { var myDropzone = new Dropzone("div#myId", { url: "file-upload"}); }); </script> <script type="text/javascript"> Dropzone.options.myId = { // Prevents Dropzone from uploading dropped files immediately autoProcessQueue: false, init: function() { var submitButton = document.querySelector("#add") myDropzone = this; // closure submitButton.addEventListener("click", function() { myDropzone.processQueue(); // Tell Dropzone to process all queued files. }); // You might want to show the submit button only when // files are dropped here: this.on("addedfile", function() { // Show submit button here and/or inform user to click it. }); } }; </script> </head> <body> <?php echo form_open('test/collect_input'); ?> <!-- One of the many inputs of my form --> <select id="list_type"> <option value="-1">Chooose a type</option> <option value="1">>>Type A</option> <option value="2">>>Type B</option> </select> <!-- Dropzone --> <div id="myId" class="dropzone"></div> <!-- Submit button--> <input type="submit" id="add" name="add" value="Add!!"> </form> </body> </html>
Вы можете указать свой собственный URL для загрузки файла. В настоящее время я просто устанавливаю его как 'someurl'
Dropzone.autoDiscover = false; jQuery(document).ready(function() { var myDropzone = new Dropzone("#myId", { url: 'someurl', autoProcessQueue:false }); $('#add').on('click',function(e){ e.preventDefault(); myDropzone.processQueue(); }); });
<script> $(document).ready(function () { Dropzone.options.dropzoneForm = { autoProcessQueue: false }; }); function processEvent() { // call this to trigger the upload $('#dropzoneForm').get(0).dropzone.processQueue(); } </script> <form action="/your-post-url-here" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm"></form>