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」属性を 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 console.log : file.name file.size file.type file.lastmodified console.groupend false><span></span>概要: 「accept」タグを追加して、ユーザーがアップロードできるファイルの種類をフィルタリングすることもできます。たとえば、ユーザーに画像のみをアップロードさせたい場合は、MIME タイプ「image/*」をフィルタリングするだけで済みます:<p>。 </p>
<pre name="code"><input type="file" id="fileinput" multiple accept="image/*">

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

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

は次のとおりです:

    <meta charset="UTF-8">
    <title>Preview images</title>
    <style>
        #gallery .thumbnail{
            width:150px;
            height: 150px;
            float:left;
            margin:2px;
        }
        #gallery .thumbnail img{
            width:150px;
            height: 150px;
        }

    </style>


<h2 id="Upload-images">Upload images ...</h2>

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

<div id="gallery"></div>
<script src="gallery.js"></script>

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 false><span></span>previewImage関数は、ユーザーが選択したファイルを表示します。<p><span></span>gallery.js</p>
<p></p>
<pre name="code">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>

Js は次のとおりです:

var uploadfiles = document.querySelector('#uploadfiles');
uploadfiles.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length i uploadfile false><span></span>PHP スクリプトは次のとおりです:<p> </p>
<pre name="code">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 チュートリアルに興味のある友人に役立つことを願っています。