HTML5 文件上傳範例

原文網址:

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

本文將為大家展示如何使用HTML5來讀取使用者選擇的檔案資訊並將檔案上傳到一個伺服器上.

FileApi是HTML5新新增的功能中最有趣的一個. 我們可以在檔案上傳到伺服器前讀取顯示檔案的資訊, 並且可以不使用post表單的方式來傳送檔案.

下文將展示如何讀取用戶選擇的文件資訊, 並使用Ajax異步上傳這些文件.

1.顯示文件1

1.顯示文件

. HTML程式碼如下

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

當使用者選擇一個檔案時, inpupt元素會產生「簡單, 它在input元素中添加了”files”屬性.

小結: “files”屬性不可寫, 只能讀取其中的內容. 您可能注意到了, 使用this.files[0]就可以獲得使用者選擇的第一個檔案.

1.2: 多個檔案

現在我們要顯示使用者所選的全部檔案資訊。我們只需要在input元素中添加”multiple”屬性, 這樣就可以允許用戶選擇多個文件上傳.

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

小結: 您還可以添加”accept”標籤來過濾用戶可以上傳的文件類型. 例如,當您只希望用戶上傳圖片時, 只需要過濾出MIME類型”image/*”即可:

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

1.3 預覽文件

我們既可以讀取文件信息, 也能讀取文件的內容. 例如, 我們可以在上傳之前預覽文件.

以預覽圖片舉例:

HTML程式碼如下:

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

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

previewImage函數將會顯示使用者選擇的檔案.

gallery.js

    
    
    


Upload images ...

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

我們引入了FileReader物件來非同步讀取檔案內容. 透過使用new FileReaderReader 讀取實例文件的數據.

onload方法在檔案內容讀取結束後像事件一樣被呼叫, 然後檔案內容會被賦值到image元素的src屬性中: aImg.src = e.target.result;

2.上傳檔案

我們使用XMLHttpRequest(Ajax)來上傳檔案.

每一個使用者選擇的檔案都會建立一個HTTP請求傳送到伺服器上.

來上傳檔案.

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

這個方法將會產生一個ajax請求(透過post方式)到指定的url, 並傳送」upload_file」請求參數中的檔案內容. 我們可以透過$_FILES['upload_file']來取得這個參數.

現在, 我們將使用uploadFile方法來上傳選取的檔案.

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

Js如下:

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

全部原始碼

以上就介紹了HTML5 檔案上傳範例，包含了方面的內容，希望對PHP教學有興趣的朋友有幫助。