• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML5 Drag and Drop File-Upload

wolf360

Neues Mitglied
Hallo,

ich bin zur Zeit am rumspielen mit den neuen HTML-Elementen bzw Funktionen, da sie ja von einigen Browsern schon unterstüzt werden.

Ich habe mich jetzt mal ein bisschen in das Thema drag and drop in Verbindung mit einem File-Upload eingelesen und hab dazu ein paar fragen.

Hier erstmal der Code:
HTML:
 var dropbox = document.getElementById('dropbox');
                                                                                                   
  dropbox.addEventListener('dragenter', noopHandler, false);                                                                                                                      
  dropbox.addEventListener('dragexit', noopHandler, false);                                                                                                                       
  dropbox.addEventListener('dragover', noopHandler, false);                                                                                                                       
  dropbox.addEventListener('drop', drop, false); 
                                                                                                              
  function noopHandler(evt) {                                                                                                                                                     
  evt.stopPropagation();                                                                                                                                                          
  evt.preventDefault();                                                                                                                                                           
  } 
                                                                                                                                                                       
  function drop(evt) {                                                                                                                                                            
  evt.stopPropagation();                                                                                                                                                          
  evt.preventDefault();                                                                                                                                                           
                                                                                                                                                                                  
        var files = evt.dataTransfer.files;                                                                                                                                       
        var count = files.length;                                                                                                                                                 
                                                                                                                                                                                  
        if (count > 0) {                                                                                                                                                          
        handleFiles(files);                                                                                                                                                       
        }                                                                                                                                                                         
  }               
 function handleFiles(files) {                                                                                                                                                   
     var count = files.length                                                                                                                                                     
      for (i=0; i<count;i++) {                                                                                                                                                    
      file = files[i];                                                                                                                                                            
      document.getElementById('droplabel').innerHTML = "Processing" + file.name;
                                                           
      var reader = new FileReader();
                                                                                                                                 
      reader.onprogress = handleReaderProgress;                                                                                                                                   
      reader.onloadend = handleReaderOnLoadEnd;  
                                                                                                        
      reader.readAsDataURL(file);
                                                                                                                                   
      xhr = new XMLHttpRequest();                                                                                                                                                 
      xhr.open('post', '/Galerie/imagesave', true);                                                                                                                               
      xhr.setRequestHeader("X-File-Name", file.name);                                                                                                                             
      xhr.setRequestHeader("X-File-Category", <?php echo $this->id; ?>);                                                                                                          
      xhr.send(file);                                                                                                                                                         
      }                                                                                                                                                                           
  }                                                                                                                                                                               
                                                                                                                                                                                  
  function handleReaderProgress(evt) {                                                                                                                                            
      if (evt.lengthComputable) {                                                                                                                                                 
      var loaded = (evt.loaded / evt.total);                                                                                                                                      
      }   
                                                                                                                                                                        
      $("#progressbar").progressbar({ value:loaded * 100});                                                                                                                       
  }                                                                                                                                                                               
                                                                                                                                                                                  
  function handleReaderOnLoadEnd(evt) {                                                                                                                                           
        $("#progressbar").progressbar({ value: 100});                                                                                                                             
                                                                                                                                                                                  
        $('<img src='+evt.target.result+' />').appendTo("body");                                                                                                                  
        var img = document.getElementById("preview");  
        img.src = evt.target.result;                                                                                                                                              
  }

Ist es irgendwie möglich den Request als $_FILE oder $_POST-Variable an mein PHP script zu senden und dazu noch andere Post-Paramter anzuhängen?

Im moment muss ich das gesendet Bild mit $img = file_get_contets('php://input'); einlesen, aber ich hätte das Bild z.B. gern im $_POST Paramter "img".

Grüße

wolf360
 
Wollen nicht, da ich es ja mit Drag and Drop mache bleibt mir ja keine andere Wahl als des als String zu übermitteln oder geht das auch anders?

Bei dem Beispiel bei CSS-Ninja übermitteln die es als Binary, aber auch ohne "namen"
 
Ich habe mir nun deine Code nicht angeguckt, aber mein erster Gedanke wäre, eine versteckte Form im Formular zu haben und deren (eventuell versteckten File-) Felder mittels Drag&Drop zu füllen. Danach könnte man den Submit der Form machen.
 
Ich habe mir nun deine Code nicht angeguckt, aber mein erster Gedanke wäre, eine versteckte Form im Formular zu haben und deren (eventuell versteckten File-) Felder mittels Drag&Drop zu füllen. Danach könnte man den Submit der Form machen.
Wird leider nicht funktionieren. Und ich nehme an das Ganze sollte auch über Ajax funktionieren.

@wolf
Bei dem Ajax Request kannst du natürlich auch den Namen noch per POST mitsenden.
Ich hab damals Bilder base64 encodet an meinen Server geschickt, habe ein Bild daraus gemacht und sie dann abgespeichert.

Hatte das Beispiel von mir wiede rgefunden

Code:
// Bei change alle Files auslesen
for(var i=0; i < this.files.length; i++ ) {
  // Einzelne File einlesen
  var file = this.files[i];
  var reader = new FileReader();
  // Wenn das auslesen fertig ist, soll das Ergebnis ausgegeben werden
  reader.onloadend = function() {
       // Dieser String kann abgespeichert werden
          alert(this.result);
  };
  reader.readAsDataURL(file);
}
 
okey, ich steht da jetzt leider voll auf dem schlauch...

hab das jetzt so gemacht beim senden


HTML:
....
    xhr.send("file_name="+file.fileName+"&id="+id+"&file="+file));

Jetzt habe ich aber in der Post-Variable "file" [object data] steht und nicht das bild?

// Edit:
Hab jetzt schon mehrere Methoden ausprobiert das Bild zu erstellen, aber ich bekomme jedes mal den Fehler:

imagecreatefromstring() [<a href='function.imagecreatefromstring'>function.imagecreatefromstring</a>]: Data is not in a recognized format in

Habs mit folgenden Methoden probiert zu senden:
- file.getAsBinary()
- file.getAsText()
- file.getAsDataUrl()

aber nichts funkioniert -.-"
 
Zuletzt bearbeitet:
Hast du denn wenigstens beachtet, dass die Bilder geladen sein müssen?
Und poste mal bitte eine Seite, an der man ein zusammenhängendes Beispiel sieht. Hast du das Ganze denn schonmal debugt (z.B. mit Firebug oder der Entwicklerkonsole von Webkit-Browsern) ?
 
wirklich überprüfen tu ich das nicht, aber mit xhr.send(file) geht es immer...

hier nochmal der Code:
JavaScsript / HTML
HTML:
<script type="text/javascript">
  var dropbox = document.getElementById('dropbox');        
                                                                                             
  dropbox.addEventListener('dragenter', noopHandler, false);                                                                                                                      
  dropbox.addEventListener('dragexit', noopHandler, false);                                                                                                                       
  dropbox.addEventListener('dragover', noopHandler, false);                                                                                                                       
  dropbox.addEventListener('drop', drop, false);
                                  
  function noopHandler(evt) {                                                                                                                                                     
  evt.stopPropagation();                                                                                                                                                          
  evt.preventDefault();   
 }   
                                                                                                                                                                            
  function drop(evt) {                                                                                                                                                            
  evt.stopPropagation();                                                                                                                                                          
  evt.preventDefault();                                                                                                                                                           
                                                                                                                                                                                  
        var files = evt.dataTransfer.files;
        var count = files.length;

        if (count > 0) {
        handleFiles(files);
        } 
  } 
  
  function handleFiles(files) { 
     var count = files.length; 
      for (i=0; i<count;i++) {   
      file = files[i]; 
      document.getElementById('droplabel').innerHTML = "Processing" + file.name;

      var reader = new FileReader(); 

      reader.onprogress = handleReaderProgress;
      reader.onloadend = handleReaderOnLoadEnd; 

      reader.readAsDataURL(file);                                                                                                                                                 
      var id = <?php echo $this->id; ?>;                                                                                                                                          
      xhr = new XMLHttpRequest();                                                                                                                                                 
      xhr.open('POST', '/Galerie/imagesave', true);                                                                                                                               
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");                                                                                                  
          xhr.send("file_name="+file.fileName+"&id="+id+"&file="+file.getAsDataURL());
      }
  }         

                  function handleReaderProgress(evt) {                                                                                                                                            
      if (evt.lengthComputable) {                                                                                                                                                 
      var loaded = (evt.loaded / evt.total);                                                                                                                                      
      }                                                                                                                                                                           
                                                                                                                                                                                  
      $("#progressbar").progressbar({ value:loaded * 100});                                                                                                                       
  }                                                                                                                                                                               
                                                                                                                                                                                  
  function handleReaderOnLoadEnd(evt) {                                                                                                                                           
        $("#progressbar").progressbar({ value: 100});                                                                                                                             
                                                                                                                                                                                  
        $('<img src='+evt.target.result+' />').appendTo("body");                                                                                                                  
        var img = document.getElementById("preview");                                                                                                                             
        img.src = evt.target.result;                                                                                                                                              
  }                                         
</script>

PHP-Code
PHP:
    public function imagesaveAction()                                                                                                                                             
    {                                                                                                                                                                             
        $request = $this->getRequest();                                                                                                                                           
        $id = $request->id;                                                                                                                                                       
        $modelGalleryImages = new Model_GalleryImages();                                                                                                                          
        $path = MODULE_PATH.'/public/images/gallery/'.$id;                                                                                                                        
        if (!is_dir($path)) {                                                                                                                                                     
            mkdir($path);                                                                                                                                                         
        }                                                                                                                                                                         
                                                                                                                                                                                  
        $file = $request->file;                                                                                                                                                   
                                                                                                                                                                                  
        $source = base64_decode($file);                                                                                                                         
        $name =  $request->file_name;                                                                                                                                             
        $img = imagecreatefromstring($source);                                                                                                                                    
        $thumb = $img;                                                                                                                                                            
        $lastinsertid = $modelGalleryImages->insert(array('id_category' => $id));
        $type = end(explode('.', $name));
        echo $img; exit;
        imagejpeg($img, $path."/$lastinsertid.$type");

        $path_thumbnails = $path.'/thumbnails';
        if (!is_dir($path_thumbnails)) {  
            mkdir($path_thumbnails);
        }

        $img = new Imagick($path."/$lastinsertid.$type");
        $img->resizeImage(200,200, Imagick::FILTER_LANCZOS, 1); 
        $img->writeImage($path_thumbnails."/$lastinsertid.$typ"); 
        exit;                                                                                                                                                                     
    }
 
Zurück
Oben