h5 でのファイルのアップロードとダウンロードの例

はじめに

HTML5 で提供されるファイル API には、フロントエンドに豊富なアプリケーションがあり、コンテンツのアップロード、ダウンロード、読み取りなどが日常的なやり取りで行われます。また、IE が IE10 以降のバージョンのみをサポートすることを除いて、モバイル端末を含むさまざまなブラウザーとの互換性は比較的良好です。ファイル操作の機能をよりよく習得したい場合は、まず各 API に精通する必要があります。

原著者: Lin Xin、著者のブログ:

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

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

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

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

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

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

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

<input type="file" id="files" multiple><script>var elem = document.getElementById(&#39;files&#39;);elem.onchange = function (event) {var files = event.target.files;for (var i = 0; i < files.length; i++) {// 文件类型为 image 并且文件大小小于 200kbif(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-5eb16b38ba36var 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(&#39;files&#39;),img = document.getElementById(&#39;preview&#39;);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 エンコードをサポートするために、HTML5 に新しい atob メソッドと btoa メソッドが追加されています。それらの名前も非常に単純で、b to a および a to b で、エンコードとデコードを表します。

var a = "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 でエンコードする必要があります。

りー

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