1. Datei -API: (Datei -API)
Jede von einem Dateityp -Formularsteuerung ausgewählte Datei ist ein Dateiobjekt, und das filelistische Objekt ist eine Sammelliste dieser Dateiobjekte, die alle ausgewählten Dateien darstellt. Das Dateiobjekt erbt von einem Blob -Objekt, das binäre Rohdaten darstellt und eine Slice -Methode zum Zugriff auf die ursprünglichen Datenblöcke in Bytes bietet. Kurz gesagt, das Dateiobjekt enthält das Flilist -Objekt und das Dateiobjekt erbt vom Blob -Objekt!
Relevante Attributbeziehungen jedes Objekts:
Filereader -Schnittstelle:
Wie aus der Abbildung ersichtlich ist, bietet HTML5 auch eine FileReader -Schnittstelle: zum Lesen von Dateien in den Speicher und zum Lesen von Daten in der Datei.
var reader = new fileReader ();
Insgesamt gibt es vier Methoden und sechs Ereignisse für diese Schnittstelle:
• ReadasbinaryString (Datei): Lesen Sie die Datei als binär
• ReadasDataurl (Datei): Dateidatenurl lesen
• Readastext (Datei, [Codierung]): Lesen Sie die Datei als Text
• Über (keine): Interrupt -Dateilesung unterbrechen
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
• Onabort: Ausgelöst beim Lesen von Dateiinterrudeln
• OnError: Ausgelöst, wenn ein Fehler auftritt, wenn eine Datei gelesen wird
• OnloadStart: Ausgelöst beim Lesen der Datei Starts
• On -Progress: Wenn Sie die Datei lesen
• Onload: Ausgelöst, wenn die Datei erfolgreich gelesen wird
• Onloadend: Ausgelöst am Ende des Lesens der Datei (sowohl Erfolg als auch Misserfolg werden ausgelöst)
Die obigen Ereignisparameter E haben e.Target.Result oder dies.
2. API Drag & Drop:
Drag & Drop -Attribut: Setzen Sie das dragbare Attribut des Elements, das gezogen und auf true fallen muss (Dragable = "True")! Das IMG -Element und ein Element können standardmäßig gezogen und fallen gelassen werden.
Drag & Drop -Ereignisse: (unterteilt in Ereignisse und Zielelementeereignisse von Drag & Drop -Elementen)
Ereignisse des Drag & Drop -Elements:
• Dragstart: Ausgelöst vor dem Ziehen
• Ziehen Sie vor und nach dem Ziehen kontinuierlich, löst sie kontinuierlich aus
• Dragend, das Drag End Triggers
Zielelementereignis:
• Dragenter geben Sie das ausgelöste Zielelement ein
• Dragover, zwischen dem Eingeben des Ziels und dem Verlassen des Ziels, kontinuierlich auslösen
• Dragleave, das Zielelement auslösen
• Lassen Sie den Mausauslöser auf dem Zielelement fallen lassen
Aber! Es sollte beachtet werden, dass im Zielelement das Standardverhalten in den Dragover- und Drop -Ereignissen blockiert werden sollte (Dragover und Drop werden abgelehnt), ansonsten nicht implementiert werden kann!
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DataTransfer -Objekt: Es wird speziell verwendet, um Daten zu speichern, die während des Drag -and -Drops übertragen werden sollen. Es kann als Datatransfer -Eigenschaft von Drag & Drop -Ereignissen festgelegt werden.
3 Attribute:
• Effectalowed: Set Cursor -Stile (keine, kopy, copyLink, copymove, link, linkmove, verschieben, alles und nicht initialisiert)
• Effectalowed: Stellen Sie die visuellen Effekte von Drag & Drop -Operationen ein
• Typen: Die Art der gespeicherten Daten, ein Pseudo-Array von Strings
• Dateien: Holen Sie sich die externe gezogene Datei, geben Sie eine filelistische Liste zurück. Es gibt ein Typ -Attribut unter Dateilist, der den Dateityp zurückgibt
4 Methoden:
• setData (): Setzen Sie den Datenschlüssel und den Wert (muss eine Zeichenfolge sein)
• getData (): Daten abrufen und den entsprechenden Wert gemäß dem Schlüsselwert erhalten.
• clearData (): Löschen Sie die im DataTransfer -Objekt gespeicherten Daten
• setDagimage (ImageRl, log x, lang y): Verwenden Sie das IMG -Element, um das Drag & Drop -Symbol festzulegen
//Beispiel:
target.addeventListener ('DragStart', Funktion (e) {
var fs = e.datatransfer.files; // Drag & Drop -Datei -Objektliste Flilist -Objekt abrufen
var dt = e.datatransfer; // Datatransfer -Eigenschaft als Drag & Drop -Ereignis
dt.effectallowed = 'copy';
dt.setData ('text/plain', 'Hallo');
dt.setDagimage (Dragicom, -10, -10);
});
3. Ziehen Sie das Bild -Bild -Vorschau hoch und drop:
Ideen:
1. Mit den vier Ereignissen des Datei -Ziehenszielelements vertraut. Hinweis: Das Standardverhalten wird in den ONDRAGOVER- und ONDROP -Ereignissen blockiert.
2. Nach dem Ziehen und Fallen
3.. Schleifen Sie jedes Dateiobjekt in der Sammlung, beurteilen Sie die Dateityp und die Dateigröße und führen Sie entsprechende Vorgänge aus, wenn der Typ angegeben ist.
4. Lesen Sie Dateiinformationsobjekte: New FileReader (), das Methoden wie das Lesen von Dateiobjekten als DataURL: ReadasDataurl (Dateiobjekt), Ereignisse nach erfolgreichem Lesen: Onload -Ereignis usw., enthält.
5. Führen Sie die entsprechende logische Verarbeitung in mehreren Ereignissen im FileReader -Objekt durch
HTML:
<Div> <p> Bitte ziehen Sie die Bilddatei in diesen Bereich! </p> </div>
Gesamtlastanzahl: <span id = 'Gesamt'> 100 </span>
JQ:
<script type = "text /javaScript"> $ (function () { / *Gedanken: *1. Seien Sie mit den vier Ereignissen des Zielelements des Datei -Ziehensziels vertraut. HINWEIS: Das Standardverhalten wird im ONDRAGOVER -Ereignis blockiert. ist ein angegebener Typ*4. = $ (". Container"). op.html ('Bitte ziehen Sie die Bilddatei in diesen Bereich!'); Objektsammlung // Längenkonsole.log (fs.Length); console.log (fs [i] .Size); $ ("#Total"). HTML (e.total); oimg.attr ("src", this.result); Hochladen, AJAX sendet die Datei, die Binärdatei hochladen}}}} else {alert ('Bitte laden Sie die Bilddatei hoch!'); </script>Reproduktionsbild:
Zusammenfassung: Kombination von Kenntnissen der Drag & Drop -Ereignis -API, DataTransfer -Objekt- und Dateilesen Objekt -Filelist usw., um den Vorschau -Effekt des einfachen Hochladens von Bildern zu erreichen. Sie müssen die Beziehung und Verwendung eines Objekts kennen und die Implementierungsideen klären!
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.