So verwenden Sie HTML5 -Datei Drag & Drop

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.

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple>
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div></code>

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:

<code class="language-css">#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;
}</code>

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

<code class="language-javascript">// 通过ID获取元素
function $id(id) {
    return document.getElementById(id);
}

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

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.

<code class="language-javascript">// 调用初始化文件
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";
    }

}</code>

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:

<code class="language-javascript">// 文件拖放悬停
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}</code>

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 () ...

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple>
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div></code>

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!