web-dev-qa-db-fra.com

Comment faire en sorte que Dropzone.js télécharge des fichiers uniquement lorsqu'un bouton de soumission est cliqué?

au cours des derniers jours, j'ai essayé d'implémenter Dropzone dans mon formulaire, mais jusqu'à présent, je n'ai pas eu de chance de savoir comment le faire télécharger et traiter les images uniquement lorsque le bouton de soumission est cliqué. J'ai donc décidé de venir ici et de vous demander de l'aide.
J'ai créé un exemple de structure de code afin que vous puissiez seulement voir ce qui est nécessaire. À l'heure actuelle, je pense que cela devrait fonctionner de la même façon lorsque je mets des images dans la zone de dépôt et que je clique sur le bouton qui déclenche la fonction collect_input depuis le contrôleur. Mais je n'ai aucune idée de comment traiter les fichiers, etc. Donc, Je suppose que ce que je demande, c'est une astuce/solution sur la façon de traiter les fichiers à partir du formulaire, par exemple, les enregistrer dans un dossier et ajouter une entrée à une base de données.
Je vais publier le code ci-dessous et si l'un de vous a des conseils ou des solutions, partagez-les avec moi. Je tiens à vous remercier tous d'avance pour avoir lu ce document et pour vos réponses. Btw je travaille dans CodeIgniter.
[Téléchargez l'ensemble du projet (css, js php] http://puu.sh/5eqLc.Zip

htdocs/application/controllers/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/application/controllers/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">&gt;&gt;Type A</option>
                   <option value="2">&gt;&gt;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>
javascriptphpjquerycodeigniter
19
user1227065

Vous pouvez fournir votre propre URL pour télécharger le fichier. Actuellement, je le configure simplement comme '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();  
  });   
});
22
Nouphal.M
<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>
2
Wagner da Silva