Beispiel für das Hochladen einer HTML5-Datei-PHP-Tutorial-php.cn

Beispiel für das Hochladen einer HTML5-Datei

WBOY

Freigeben： 2016-08-08 09:19:19

Original

996 Leute haben es durchsucht

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" />

Nach dem Login kopieren

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);

Nach dem Login kopieren

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" />

Nach dem Login kopieren

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);

Nach dem Login kopieren

1.3 Vorschau der Datei

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

Nach dem Login kopieren

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.




    
    Preview images
    



Upload images ...

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

Nach dem Login kopieren

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);

Nach dem Login kopieren

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(&#39;thumbnail&#39;); // 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);
}

Nach dem Login kopieren

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 = &#39;server/index.php&#39;;
    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);
}

Nach dem Login kopieren

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

Js ist wie folgt:

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

Nach dem Login kopieren

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);

Nach dem Login kopieren

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 ...";
}

Nach dem Login kopieren

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.