HTML5ファイルのアップロード例

元のアドレス:

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

この記事では、HTML5 を使用してユーザーが選択したファイル情報を読み取り、ファイルをアップロードする方法を説明します。

FileApi は HTML5 の最も興味深い新機能の 1 つで、表示されているファイルに関する情報をサーバーにアップロードする前に読み取ることができ、投稿フォームを使用せずにファイルを送信できます。

以下では、Ajaxを使用して、ユーザーが選択したファイル情報を読み取り、それらのファイルを非同期にアップロードする方法を示します。

1. ファイル情報を表示する

1.1:のみの場合1 つのファイル

HTML コードは次のとおりです

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

ユーザーがファイルを選択すると、input 要素は「change」イベントを生成するため、このイベントをリッスンできます:

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

ご覧のとおり、FileApi は非常に使いやすく、input 要素に「files」属性を追加します。

概要: 「files」属性は書き込み可能ではなく、その内容を読み取ることのみが可能です。これを使用して取得できることに気付きました。files[0] ユーザーが選択した最初のファイルです。

1.2: 複数のファイル

ここで、すべてのファイル情報を表示したいと思います。ユーザーによって選択されました。

HTML コードは次のとおりです

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

「multiple」属性を input 要素に追加するだけで、ユーザーはアップロードする複数のファイルを選択できます。

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

概要: 「accept」タグを追加して、ユーザーがアップロードできるファイルの種類をフィルタリングすることもできます。たとえば、ユーザーに画像のみをアップロードさせたい場合は、MIME タイプ「image/*」をフィルタリングするだけで済みます:

。

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

1.3 ファイルをプレビューする

ファイル情報を読み取ることも、ファイルのコンテンツを読み取ることもできます。たとえば、プレビュー画像を例として挙げます。

は次のとおりです:

    
    
    


Upload images ...

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

JavaScriptを使用してファイルのアップロードを管理します。

gallery.js

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

previewImage関数は、ユーザーが選択したファイルを表示します。

gallery.js

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

ファイルの内容を非同期で読み取る FileReader オブジェクトを導入しました。新しい FileReader を使用してオブジェクトをインスタンス化し、readAsUrl メソッドを呼び出してファイルのデータを読み取ります。 ファイル コンテンツが読み取られた後、

onload メソッドがイベントのように呼び出され、ファイル コンテンツが画像要素の src 属性に割り当てられます: aImg.src = e.target.result;

2. ファイルをアップロードします

ファイルをアップロードするには XMLHttpRequest (Ajax) を使用します。

ユーザーが選択したすべてのファイルは HTTP リクエストを作成し、サーバーに送信します。

最初に定義しますXMLHttpRequest を含むメソッド ファイルをアップロードするには

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

このメソッドは、指定された URL に (post メソッド経由で) ajax リクエストを生成し、「upload_file」リクエスト パラメーターでファイルのコンテンツを送信します。 $_FILES[ を渡すことができます。 'upload_file'] このパラメータを取得するには、

次に、uploadFile メソッドを使用して、選択したファイルをアップロードします。

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

Js は次のとおりです:

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

PHP スクリプトは次のとおりです:

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

3. ダウンロード

すべてのソースコード

上記では、関連する内容も含めて HTML5 ファイルのアップロード例を紹介しています。PHP チュートリアルに興味のある友人に役立つことを願っています。