Beispiel für das Hochladen einer HTML5-Datei

Ursprüngliche Adresse:

http://www.webcodegeeks.com/html5/html5-file-upload-example/

Dieser Artikel zeigt Ihnen, wie Sie HTML5 verwenden Zum Lesen der vom Benutzer ausgewählten Dateiinformationen und zum Hochladen der Datei auf einen Server.

FileApi ist eine der interessantesten neuen Funktionen, die in HTML5 hinzugefügt wurden. Wir können die Datei lesen, bevor wir sie hochladen zum Server Rufen Sie die Informationen der angezeigten Datei ab, und Sie können die Datei senden, ohne das Postformular zu verwenden

Im Folgenden wird gezeigt, wie die vom Benutzer ausgewählten Dateiinformationen gelesen werden. und verwenden Sie Ajax, um diese Dateien asynchron hochzuladen

1 1.1: Situation mit nur einer Datei

Der HTML-Code lautet wie folgt

Wenn der Benutzer eine Datei auswählt, generiert das Eingabeelement ein „Änderungs“-Ereignis, sodass wir dieses Ereignis abhören können:

<input type="file" id="fileinput" />

Wie Sie sehen können, FileApi ist sehr einfach zu verwenden, es fügt das Attribut „Dateien“ hinzu.

document.getElementById('fileinput').addEventListener('change', function(){
    var file = this.files[0];
    // This code is only for demo ...
    console.log("name : " + file.name);
    console.log("size : " + file.size);
    console.log("type : " + file.type);
    console.log("date : " + file.lastModified);
}, false);

Zusammenfassung: Das Attribut „Dateien“ ist nicht beschreibbar und kann nur seinen Inhalt lesen. Möglicherweise haben Sie dies bemerkt .files[0] können Sie die erste ausgewählte Datei des Benutzers abrufen.

1.2: Mehrere Dateien

Jetzt wollen wir alle vom Benutzer ausgewählten Dateiinformationen anzeigen.

Der HTML-Code lautet wie folgt

Wir müssen nur das Eingabeelement-Attribut „mehrere“ hinzufügen, das es Benutzern ermöglicht, mehrere Dateien zum Hochladen auszuwählen

<input type="file" id="fileinput" multiple="multiple" />

Zusammenfassung: Sie können auch hinzufügen das „accept“-Tag, um die Dateitypen zu filtern, die Benutzer hochladen können. Wenn Sie beispielsweise möchten, dass Benutzer nur Bilder hochladen, müssen Sie nur den MIME-Typ „image/*“ herausfiltern:

document.getElementById('fileinput').addEventListener('change', function(){
    for(var i = 0; i<this.files.length; i++){
        var file =  this.files[i];
        // This code is only for demo ...
        console.group("File "+i);
        console.log("name : " + file.name);
        console.log("size : " + file.size);
        console.log("type : " + file.type);
        console.log("date : " + file.lastModified);
        console.groupEnd();
    }
}, false);

1.3 Vorschau der Datei

<input type="file" id="fileinput" multiple="multiple" accept="image/*" />

Wir können beispielsweise vor dem Hochladen eine Vorschau der Datei anzeigen.

Nehmen Sie das Vorschaubild als Beispiel:

Der HTML-Code lautet wie folgt:

Verwenden Sie JavaScript, um Datei-Uploads zu verwalten.

    
    
    


Upload images ...

<input type="file" id="fileinput" multiple="multiple" accept="image/*" />

gallery.js

Die Funktion „previewImage“ zeigt die von der Datei ausgewählte Datei an Benutzer.

var uploadfiles = document.querySelector('#fileinput');
uploadfiles.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length; i++){
        previewImage(this.files[i]);
    }
}, false);

gallery.js

Wir haben das FileReader-Objekt eingeführt, um den Dateiinhalt asynchron zu lesen, indem wir den neuen FileReader zum Instanziieren des Objekts verwenden. und dann die Methode readAsUrl aufrufen, um die Dateidaten zu lesen. Die

onload-Methode wird wie ein Ereignis aufgerufen, nachdem der Dateiinhalt gelesen wurde, und dann wird der Dateiinhalt dem src-Attribut des Bildelements zugewiesen: aImg.src = e.target.result;

function previewImage(file) {
    var galleryId = "gallery";

    var gallery = document.getElementById(galleryId);
    var imageType = /image.*/;

    if (!file.type.match(imageType)) {
        throw "File Type must be an image";
    }

    var thumb = document.createElement("div");
    thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div

    var img = document.createElement("img");
    img.file = file;
    thumb.appendChild(img);
    gallery.appendChild(thumb);

    // 使用FileReader来显示图片内容
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
}

2. Dateien hochladen

Wir verwenden XMLHttpRequest (Ajax), um Dateien hochzuladen .

Jede vom Benutzer ausgewählte Datei erstellt eine HTTP-Anfrage und sendet sie an den Server

Definieren Sie zunächst eine Methode, die XMLHttpRequest enthält um die Datei hochzuladen.

Diese Methode generiert eine Ajax-Anfrage (über die Post-Methode) an die angegebene URL und sendet den Dateiinhalt in der Datei „upload_file“. Anforderungsparameter. Wir können diesen Parameter über $_FILES['upload_file'] abrufen.

function uploadFile(file){
    var url = 'server/index.php';
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // Every thing ok, file uploaded
            console.log(xhr.responseText); // handle response.
        }
    };
    fd.append("upload_file", file);
    xhr.send(fd);
}

Jetzt verwenden wir die uploadFile-Methode, um die ausgewählte Datei hochzuladen.

Js ist wie folgt:

<input type="file" id="uploadfiles" multiple="multiple" />

PHP-Skript ist wie folgt:

var uploadfiles = document.querySelector('#uploadfiles');
uploadfiles.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length; i++){
        uploadFile(this.files[i]); //上传文件
    }
}, false);

3 . Laden Sie

if (isset($_FILES['upload_file'])) {
    if(move_uploaded_file($_FILES['upload_file']['tmp_name'], "datas/" . $_FILES['upload_file']['name'])){
        echo $_FILES['upload_file']['name']. " OK";
    } else {
        echo $_FILES['upload_file']['name']. " KO";
    }
    exit;
} else {
    echo "No files uploaded ...";
}

Alle Quellcodes

herunter

Das Obige stellt das Beispiel zum Hochladen einer HTML5-Datei vor, einschließlich des relevanten Inhalts. Ich hoffe, es wird für Freunde hilfreich sein, die sich für PHP-Tutorials interessieren.