detaillierte Erl?uterung von HTML5 Drag & Drop -Datei Upload: Client -Dateiverarbeitung und asynchroner Server -Upload

Kernpunkte

• HTML5 unterstützt das Ziehen und Ablegen von Dateien in Webseitenelementen und die Analyse von Drag-and-Drop-Dateien in JavaScript, Laden und Parsen von Dateien auf dem Client, asynchrone Dateien asynchron auf dem Server mit XMLHTTPREQUEST2 und grafischem Fortschritt w?hrend des Hochladens .
• Browserunterstützung kann aufgrund der Verwendung der neuesten HTML5 -Technologie uneinheitlich sein. Aktuelle Versionen von Firefox und Chrome unterstützen alle Funktionen, w?hrend Opera, IE und Safari -Unterstützung überhaupt begrenzt oder gar nicht unterstützt werden.
• Um die Datei Drag & Drop zu aktivieren, müssen JavaScript -Ereignisse an das Dateieingabeelement und das Element #Filedrag angeh?ngt werden. Das Element #Filedrag sollte ebenfalls angezeigt und die Schaltfl?che zur Einreichung von Formularen versteckt werden.
• W3C -Datei -API enth?lt einige Objekte für Dateioperationen, einschlie?lich FileList, Datei und FileReader, mit denen Arrays ausgew?hlten Dateien, einzelne Dateien und für das Lesen von Dateidaten auf dem Client und in JavaScript verwendet werden k?nnen.

Drag & Drop -Desktop -Dateien in den Browser ist eines der ultimativen Ziele der Integration von Webanwendungen. Dies ist der erste Teil einer vierteiligen Reihe von Artikeln, in denen: 1. DRAG & DROP-Dateien in Webelementen aktivieren; V. .

Browserkompatibilit?t Herausforderung

Vor dem Start umfasst dieses Tutorial einige der neuesten HTML5 -Technologien, sodass die Unterstützung voraussichtlich ungleichm??ig ist. Der Code funktioniert jetzt, aber die API kann sich ?ndern und der Browser entwickelt sich weiter. - Die neuesten Versionen von Firefox und Chrome unterstützen alle Funktionen und laufen perfekt. - Opera kann Dateien in JavaScript analysieren, implementiert jedoch keine Datei Drag & Drop und XMLHTTPrequest2 Upload. - Die Desktop -Versionen von IE und Safari unterstützen keine APIs. - Apple hat HTML -Datei -Upload -Formulare auf iPhone- und iPad -Versionen von Safari deaktiviert. wei? jemand warum?

Bitte beachten Sie, dass mein Code das grundlegende Konzept zeigt. Es gibt nur sehr wenige Fehlerprüfungen und Sie müssen sich für Ihr Produktionssystem einstellen.

html und css

Dies ist ein Standardformular mit Dateieingangstyp. Die einzige HTML5 -Funktion ist die Eigenschaft "Mehrfach", mit der der Benutzer eine beliebige Anzahl von Dateien ausw?hlen kann. Wir laden Dateien auf den Server hoch, das PHP ausgeführt, aber der Code ist fast gleich, unabh?ngig davon, welche Technologie Sie verwenden. Der Wert Hidden MAX_FILE_SIZE gibt 300.000 Bytes an - PHP verwendet diesen Wert. Wir überprüfen ihn jedoch auch im Client, um das Hochladen gro?er Dateien zu verhindern.

<fieldset><legend>HTML文件上傳</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">選擇要上傳的文件：</label>
  <div id="filedrag">或?qū)⑽募戏诺酱颂?lt;/div>
</div>
<input type="submit" value="上傳文件" id="submitbutton">
</fieldset>
<div id="messages">狀態(tài)信息</div>

Das FileDrag -Element wird als Drag & Drop -Speicherort unserer Datei verwendet. Dieses Element ist in CSS versteckt, aber wenn Drag & Drop unterstützt wird, wird es in JavaScript aktiviert:

#filedrag {
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 1em 0;
    margin: 1em 0;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}

#filedrag.hover {
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}

Wir definieren auch eine .hover -Klasse, die den Stil ?ndert, wenn der Benutzer eine Datei auf ein Element schleppt. Der Browser gilt nicht an: Hover -Stil in diesem Fall, aber wenn das Ereignis auftritt, k?nnen wir mit JavaScript Klassen hinzufügen.

Datei -API

W3C -Datei -API bietet einige Objekte. Wir werden verwenden:- Filelist: Ein Array, das die ausgew?hlte Datei darstellt. - Datei: Repr?sentiert eine einzelne Datei. - FileReader: Eine Schnittstelle, mit der wir Dateidaten im Client lesen und in JavaScript verwenden k?nnen.

angeh?ngtes JavaScript -Ereignis

Es ist Zeit, JavaScript zu verwenden. Wir verwenden keine JavaScript -Bibliothek. Um unsere typisierenden Finger zu speichern

// 通過(guò)ID獲取元素
function $id(id) {
    return document.getElementById(id);
}

// 輸出信息
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}

Wir werden nun überprüfen, ob die Datei -API verfügbar ist, und rufen Sie die Funktion init () auf:

init () Funktion: 1. Legen Sie den Ereignish?rer für das Dateieingabeelement fest. 2. Zeigen Sie #Filedrag -Element. 3. Setzen Sie die H?rer "Dragover" und "DragLeave" Event -Ereignisse, um den Stil der #Filedrag -Elemente zu ?ndern. 4. Setzen Sie den "Drop" -Ereigungsh?rer für das Element #filedrag. 5. Ausblenden Sie die Schaltfl?che "Formulare" - Da wir die ausgew?hlte Datei analysieren und hochladen, wird sie nicht ben?tigt.

// 調(diào)用初始化文件
if (window.File && window.FileList && window.FileReader) {
    Init();
}

// 初始化
function Init() {

    var fileselect = $id("fileselect"),
        filedrag = $id("filedrag"),
        submitbutton = $id("submitbutton");

    // 文件選擇
    fileselect.addEventListener("change", FileSelectHandler, false);

    // XHR2是否可用？
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {

        // 文件拖放
        filedrag.addEventListener("dragover", FileDragHover, false);
        filedrag.addEventListener("dragleave", FileDragHover, false);
        filedrag.addEventListener("drop", FileSelectHandler, false);
        filedrag.style.display = "block";

        // 移除提交按鈕
        submitbutton.style.display = "none";
    }

}

Sie k?nnen w?hlen, ob Sie die Dateieingabedelemente ausblenden k?nnen, wenn die Datei Drag & Drop unterstützt wird. Pers?nlich bevorzuge ich es, beide Optionen anzubieten, da Drag & Drop einige Benutzerfreundlichkeitsprobleme mit sich bringt. Die XMLHTTPrequest.Upload -Methode -Methode kann Probleme in der Oper verhindern. Der Browser unterstützt Datei, Filelist und FileReader, unterstützt jedoch keine Drag & Drop -Ereignisse oder XMLHTTPrequest2. So k?nnen Dateiinformationen angezeigt werden. Wir m?chten jedoch nicht das Element #Filedrag anmelden oder die Schaltfl?che Senden entfernen.

Datei Drag & Drop -Stil ?ndern

Einige Leute haben die Drag & Drop -Datei in ihren Webbrowsern erlebt. Tats?chlich k?nnen erfahrene Webbenutzer dies für unm?glich halten. Also haben wir ein Element verwendet, das "Drag & Drop -Dateien hier" erkl?rt. Wir m?chten auch angeben, wann sie eine Datei an den Standort #Filedrag ziehen müssen, indem wir ihren Stil ?ndern:

// 文件拖放懸停
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

Analysieren Sie Drag & Drop oder ausgew?hlte Dateien

Unabh?ngig davon

Diese Funktion: 1. Rufen Sie agaEdraghover () auf, um den Schwebstil zu entfernen und das Browser -Ereignis abzubrechen. Dies ist entscheidend, da der Browser ansonsten versucht, die Datei anzuzeigen. 2. Holen Sie sich das filelistische Objekt. Dies erfolgt aus dem Dateieingangsfeld (e.target.files) oder dem #filedrag -Element (e.datatransfer.files). 3.. Schlie?lich schaltet die Funktion alle Dateiobjekte im Filelisten durch und übergibt sie als Parameter an die Funktion parsefile () ...

<fieldset><legend>HTML文件上傳</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">選擇要上傳的文件：</label>
  <div id="filedrag">或?qū)⑽募戏诺酱颂?lt;/div>
</div>
<input type="submit" value="上傳文件" id="submitbutton">
</fieldset>
<div id="messages">狀態(tài)信息</div>

Diese Funktion verwendet drei wichtigste schreibgeschützte Attribute, die vom Dateiobjekt angegeben sind, um Informationen auszugeben: -.name: Dateiname (ohne Pfadinformationen) -Typ: MIME -Typ, z. B. Bild/JPEG, Text/Plain usw. . -Size: Dateigr??e (in Bytes).

Bitte anzeigen Sie sich die Demo -Seite in Firefox, Chrome oder Opera an (keine Drag & Drop -Unterstützung). Sie k?nnen auch Dateien herunterladen, um den Code zu überprüfen. Wir haben viel abgedeckt. In meinem n?chsten Beitrag werden wir über erfahren, wie Sie HTML5- und JavaScript verwenden, um Drag & drop-Dateien zu ?ffnen … Dieser Artikel wurde auch in armenische übersetzt, wenn Sie m?chten Lesen Sie diesen Artikel und Sie werden Lernable lieben. Mitglieder k?nnen sofort auf alle E-Books und interaktiven Online-Kurse von SitePoint zugreifen, wie z. B. HTML5 und CSS3 in der realen Welt. Kommentare in diesem Artikel wurden geschlossen. Haben Sie Fragen zu HTML5? Warum nicht Fragen in unserem Forum stellen? FAQs über HTML5 -Datei Drag & Drop *

(Der folgende FAQ -Teil wurde aufgrund der L?nge des Artikels weggelassen. Bei Bedarf k?nnen Sie eine übersetzung des FAQ -Teils separat anfordern.)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML5 -Datei Drag & Drop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!