HTML5のファイルアップロードおよびダウンロード機能

ウェブサイト構築では、ファイルのアップロードとダウンロードが避けられません。HTML5 で提供される API には豊富なフロントエンド アプリケーションがあり、さまざまなブラウザーの互換性の問題を完全に解決します。

FileList オブジェクトとファイル オブジェクト

HTML の input[type="file"] タグには、ユーザーが複数のファイルを選択できるようにする multiple 属性があります。FileList オブジェクトは、ユーザーが選択したファイルのリストを表します。このリスト内の各ファイルはファイル オブジェクトです。

ファイルオブジェクトの属性:

• name: パスを除くファイル名。

• type : ファイルの種類。画像タイプのファイルはすべて image/ で始まり、アップロードを画像のみに制限するために使用できます。

• size : ファイルサイズ。ファイル サイズに基づいて追加の操作を実行できます。

• lastModified: ファイルが最後に変更された時刻。

<input type="file" id="files" multiple><script>
    var elem = document.getElementById('files');
    elem.onchange = function (event) {        
    var files = event.target.files;       
     for (var i = 0; i < files.length; i++) {
     // 文件类型为 image 并且文件大小小于 200kb
            if(files[i].type.indexOf(&#39;image/&#39;) !== -1 && files[i].size < 204800){
                            console.log(files[i].name);
            }
        }
    }
    </script>

input には accept 属性があり、ファイルのアップロードを通じて送信できるファイルの種類を指定するために使用できます。

accept="image/*" を使用すると、アップロードを画像形式のみに制限できます。ただし、Webkit ブラウザでは応答が遅いという問題があり、ファイル選択ボックスが表示されるまでに数秒かかりました。

解決策は、* ワイルドカード文字を指定された MIME タイプに変更することです。

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">

Blob オブジェクト

Blob オブジェクトはコンテナーに相当し、バイナリ データを格納するために使用できます。これには 2 つの属性があり、size 属性はバイト長を表し、type 属性は MIME タイプを表します。

作成方法

Blob オブジェクトは、Blob() コンストラクターを使用して作成できます。

var blob = new Blob(['hello'], {type:"text/plain"});

Blob コンストラクターの最初のパラメーターは配列であり、ArrayBuffer オブジェクト、ArrayBufferView オブジェクト、Blob オブジェクト、および文字列を格納できます。

Blob オブジェクトは、slice() メソッドを通じて新しい Blob オブジェクトを返すことができます。

var newblob = blob.slice(0,5, {type:"text/plain"});

slice() メソッドは 3 つのパラメーターを受け取りますが、それらはすべてオプションです。最初のパラメータはコピーされる Blob オブジェクト内のバイナリ データの開始位置を表し、2 番目のパラメータはコピーの終了位置を表し、3 番目のパラメータは Blob オブジェクトの MIME タイプです。

canvas.toBlob() は Blob オブジェクトを作成することもできます。 toBlob() は 3 つのパラメータを使用します。1 つ目はコールバック関数、2 つ目は画像タイプ、デフォルトは image/png、3 つ目は画質で、値は 0 から 1 の間です。

var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);

ファイルをダウンロード

Blod オブジェクトは、window.URL オブジェクトを通じてネットワーク アドレスを生成し、それを a タグの download 属性と組み合わせてファイルのダウンロード機能を実装できます。

たとえば、キャンバスを画像ファイルとしてダウンロードします。

var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){    // 使用 createObjectURL 生成地址，格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36
    var url = URL.createObjectURL(blob);    var a = document.createElement('a');
    a.download = 'canvas';
    a.href = url;    // 模拟a标签点击进行下载
    a.click();    // 下载后告诉浏览器不再需要保持这个文件的引用了
    URL.revokeObjectURL(url);
});

同様の方法で文字列をテキストファイルとして保存することもできます。

FileReader オブジェクト

FileReader オブジェクトは、主にファイルをメモリに読み込み、ファイル内のデータを読み取るために使用されます。コンストラクターを通じて FileReader オブジェクトを作成します

var reader = new FileReader();

このオブジェクトには次のメソッドがあります:

• abort: 読み取り操作を中断します。

• readAsArrayBuffer: ファイルの内容を ArrayBuffer オブジェクトに読み取ります。

• readAsBinaryString: ファイルをバイナリ データとして読み取ります。

• readAsDataURL: ファイルを data: URL 形式の文字列として読み取ります。

• readAsText: ファイルをテキストとして読み取ります。

アップロード画像プレビュー

一般的なアプリケーションは、クライアントが画像をアップロードした後、readAsDataURL() を通じて画像を表示することです。

<input type="file" id="files" accept="image/jpeg,image/jpg,image/png"><img src="blank.gif" id="preview"><script>
    var elem = document.getElementById('files'),
        img = document.getElementById('preview');
    elem.onchange = function () {        var files = elem.files,
            reader = new FileReader();        if(files && files[0]){
            reader.onload = function (ev) {
                img.src = ev.target.result;
            }
            reader.readAsDataURL(files[0]);
        }
    }</script>

ただし、Samsung や iPhone を含む一部の携帯電話で縦方向に写真を撮影すると、写真をアップロードする際にバグが発生し、写真が上下逆になってしまいます。 。 。ソリューションについてはここでは説明しませんので、興味のある方はご覧ください: モバイル画像アップロードの回転と圧縮のソリューション

データのバックアップとリカバリ

FileReader オブジェクトの readAsText() は、関数と組み合わせてファイルのテキストを読み取ることができます。 Blob オブジェクトのファイルをダウンロードして、データ エクスポート ファイルをローカルにバックアップできます。データを復元する必要がある場合は、入力を通じてバックアップ ファイルをアップロードし、readAsText() を使用してテキストを読み取り、データを復元します。 。

コードには上記と同様の機能があるため、ここでは繰り返しません。特定のアプリケーションについては、notepad を参照してください。

Base64 エンコード

Base64 エンコードをサポートするために、atob メソッドと btoa メソッドが HTML5 に追加されています。それらの名前も非常に単純で、b to a および a to b で、エンコードとデコードを表します。

var a = "https://lin-xin.github.io";var b = btoa(a);var c = atob(b);console.log(a);     // https://lin-xin.github.ioconsole.log(b);     // aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==console.log(c);     // https://lin-xin.github.io

btoa メソッドは、 a の値を変更せずに文字列 a をエンコードし、エンコードされた値を返します。
atob メソッドはエンコードされた文字列をデコードします。

しかし、パラメーターに 8 ビット ASCII エンコードの文字範囲を超える中国語の文字が含まれているため、ブラウザーはエラーを報告します。したがって、中国語を最初に encodeURIComponent でエンコードする必要があります。

りー

以上がHTML5のファイルアップロードおよびダウンロード機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。