HTML5 drag and drop und mehrere Dateien hochladen

Ich habe ein HTML-Formular enthält ein file-input-Feld mit mehreren Datei-Auswahl, und ich habe auch eine drag-and-drop-Funktion, mit der ich arbeite, so gut wie. Meine Frage ist, wie integriert diese beiden features so nahtlos, wenn es überhaupt möglich ist?

Im Idealfall würde ich gerne die Benutzer zu wählen Sie Ihre Dateien entweder durch drag ' N ' Drop oder über den Datei-dialog-box. Sobald der Benutzer fertig ist, die entsprechenden Dateien, klicken Sie auf das Formular die Schaltfläche "senden" hochladen.

Ich denke, die wesentliche Unsicherheit, die ich habe, ist, wie binden Sie die Dateien, die wurden gezogen und ein file-input-Feld für das Formular Vorlage.

Wo Sie in der Lage, diese Arbeit zu machen?

InformationsquelleAutor mac2017 | 2011-06-03

Schrieb ich einige jQuery-code, der genau das macht, mir sagen, ob es für Sie arbeitet.

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple DnD Uploader</title>
    <link rel="stylesheet" href="style.css" />
    <script type = "text/javascript" src = "../music/jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#drop').change(function(event){
          files = event.target.files;
          $('#drop').css('display', 'none');
          for(var i = 0, len = files.length; i < len; i++) {
            if((files[i].fileName+"").substring((files[i].fileName+"").length-4,(files[i].fileName+"").length)=='.mp3'){
            $.ajax({
              type: "POST",
              url: "uploader.php?id="+i,
              contentType: "multipart/form-data",
              headers: {
                "X-File-Name" : files[i].fileName,
                "X-File-Size" : files[i].fileSize,
                "X-File-Type" : files[i].type
              },
              beforeSend:  function() {
                $('#info').append('<li class="indicator"><span class="label">File Name :</span> '+files[i].fileName+' | <span class="label">Size :</span> ' + files[i].fileSize + ' | <img id="'+i+'" src="loading.gif" /></li>');
              },
              processData: false,
              data: files[i],
              success: function(data){
                $('#'+data).attr('src', 'check.png');
              },error: function(data){
                $('#info').append('Error: ' + data + '<br />');
              }
            });
            }else{
              $('#info').append('Error: Incorrect file type. Looking for .mp3');
            }
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="drop">
      <h1>Drop files here</h1>
      <p>To add them as attachments</p>
      <input type="file" multiple="true" id="filesUpload" />
    </div>
    <div id="info">
    </div>
  </body>
</html>

Und die PHP-Datei sieht wie folgt aus:

<?php
  $headers = array();
  foreach ($_SERVER as $k => $v){   
    if(substr($k, 0, 5) == "HTTP_"){
      $k = str_replace('_', ' ', substr($k, 5));
      $k = str_replace(' ', '-', ucwords(strtolower($k)));
      $headers[$k] = $v;
    }
  } 
  $file = new stdClass;
  $file->name = basename($headers['X-File-Name']);
  $file->size = $headers['X-File-Size'];
  $file->content = file_get_contents("php://input");
  if(file_put_contents('files/'.$file->name, $file->content))
    echo $_GET['id'];
?>

Wenn ich eine Datei ziehen, auf eine drop-zone, ich würde gerne nehmen, die Daten und hängen Sie an die Datei-input-Feld, das der Benutzer normalerweise klicken, um das Dialogfeld "Datei". Es ist unklar, wie man über dieses oder wenn es irgendwelche Sicherheitsprobleme. Auch, wenn ich das richtig verstehe, Datei-input-multiple-wirkt wie ein array so, dass die Formulardaten senden würde, der ein array von file-Daten.
Nun, was Sie tun können, ändern Sie einfach die Erfolg-Aufruf der jquery-zu so etwas wie dieses: $('#files').append(files[data].fileName); es sei denn, ich bin Missverständnis Sie.

InformationsquelleAutor Vap0r

0

Ich bin mir nicht ganz sicher, wie du es tust, so werde ich Ihnen sagen, die Art, wie ich es tun, und dann versuchen, Ihre Frage zu beantworten.
1. Einrichten von Ereignis-Listenern für das fallenlassen und <input>'s change-Ereignis.
  - für dropping: filesUpload.addEventListener("change", function () {traverseFiles(this.files);}, false);
  - für <input>: dropArea.addEventListener("drop", function (evt) {traverseFiles(evt.dataTransfer.files);}, false);
2. traverseFiles , die Sie oben sehen, ist eine Funktion, die bekommt ein FileList (ein array von Files), die einen Teil der Datei-API. Diese Funktion ruft dann eine Funktion uploadFile für jeden File.
3. uploadFile sendet die File asynchron über ajax (XMLHttpRequest.send(file)).
Nun um deine Frage zu beantworten wie binden Sie die gelöschten Dateien in einem input-Feld: können Sie nicht, tun Sie es einfach den anderen Weg. Sie erstellen eine API oder ein wrapper für Dateien hochladen und dann, wenn der Benutzer Dateien, rufen Sie diese wrapper-Funktion. Wenn der Benutzer klickt auf den <input> - Feld, Sie wieder Aufruf dieser wrapper - (, wie ich mit traverseFiles).

Sinn macht? Wenn nicht, sagen Sie mir, welchen Teil und ich Bearbeiten diese Antwort /ausbauen.

InformationsquelleAutor duality_
0
```
<input type=file multiple>
<div id='dropzone'>Drop Files Here</div>
```
onchange und Ereignisse ondrop shuld binden eine Funktion mit der variable, um die Datei-Liste.
```
var files=e.target.files||e.dataTransfer.files
```
Lesen Sie Diese

InformationsquelleAutor Konga Raju
-1

Könnten Sie "HTML5-Datei-Uploader", die vorgibt, das zu tun, was Sie brauchen, sowie die anmutig degradieren für ältere Browser:

https://github.com/gre/HTML5-File-Uploader/wiki

Ich noch nicht selber ausprobiert.

Alternativ könnten Sie werfen Sie einen Blick auf diese Seite, die versorgt alle der code, den Sie brauchen, es selbst zu tun:

http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

InformationsquelleAutor james.garriss

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.