Ergebnis 1 bis 3 von 3

Thema: Dropzone.js erweitern

  1. #1
    Neuer Benutzer
    Registriert seit
    18.01.2015
    Beiträge
    16

    Dropzone.js erweitern

    Hallo an alle,

    ich habe mich etwas mit dropzone.js beschäftigt. Herausgekommen ist ein Skript welche erst alle selektierten Dateien hochlädt wenn der Submit gedrückt wurde. Nun möchte ich aber gern schon selektierte Dateien, bei Falschauswahl, wieder löschen können.
    Jedoch habe ich keine Ahnung wie ich das bewerkstelligen soll.

    Vielleicht könnt ihr helfen?

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    	<meta charset="UTF8">
    	<title>dropzone</title>
    	<link href="style/dropzone.css" type="text/css" rel="stylesheet" />
    	<script src="scripts/dropzone.js"></script>
    	<script src="scripts/submit.js"></script>
    </head>
    <body>
    
    
    <p><a href="view_upload.php">View Upload</a></p>
    
    <button id="submit-all">Submit all files</button>
    
    <form action="parser.php" class="dropzone" id="my-dropzone"></form>
    
    </body>
    </html>
    die parse.php sieht wie folgt aus:

    Code:
    <?php
    
    if(!empty($_FILES)){
    	$temp = $_FILES['file']['tmp_name'];
    	$dir_separator = DIRECTORY_SEPARATOR;
    	$folder = "uploads";
    	
    	$destination_path = dirname(__FILE__).$dir_separator.$folder.$dir_separator;
    	
    	$target_path = $destination_path.$_FILES['file']['name'];
    	move_uploaded_file($temp, $target_path);
    }
    ?>
    sowie die submit.js

    Code:
    Dropzone.options.myDropzone = {
    
      // Prevents Dropzone from uploading dropped files immediately
      autoProcessQueue: false,
    
      init: function() {
        var submitButton = document.querySelector("#submit-all")
            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.
        });
      }
    };
    Mein Ansatz wäre pro ausgewählte Datei soll sich ein Radiobutton anzeigen. Durch Bestätigung des Radiobuttons wird dann die dazugehörige Datei gelöscht. Bzw aus der Auswahl entfernt.
    Geändert von tutter (vor einer Woche um 14:39 Uhr)

  2. #2
    Erfahrener Benutzer
    Registriert seit
    29.10.2014
    Beiträge
    487
    Die Option "addRemoveLinks: true" hinzufügen.
    i++; // zaehler i um 1 erhoehen

  3. #3
    Neuer Benutzer
    Registriert seit
    18.01.2015
    Beiträge
    16
    Danke Freak4fun!!! hat geklappt:

    ich habe nun eine neue Funktion bzw, eine Erweiterung der Funktion "addedfile"

    Code:
        this.on("addedfile", function() {
    	 
    	 $("#auswahl-menu").html("");  
    	   for (var i = 0; i < this.files.length; i++) {
    			
    			$("#auswahl-menu").append("<div class = \"test\" id = \"test_"+i+"\"> <label>Dokumententyp wählen von Datei <br>"+this.files[i].name +
    			": <br><select id='Auswahl_Typdokument_"+ i +"'> <option value='Auswahl_treffen' selected>Bitte Auswahl treffen</option> <option value='Bild'>Bild</option><option value='Text'>Text</option></select> <br></label>  </div>"
    			);
    			
    		
    		}
    	   
       });
    Soweit klappt das auch über die dazu gehörige CSS wird die Klasse gesteuert. Jedoch wird das nachfolgende Bild nicht in div id = "test_0" oder andere geadded. Ich weiß aber auch nicht wie ich dem Skript bei bringen kann nicht in id ="my-dropzone" sondern eben in das div id = "test_0"

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •