JavaScript HTML5 ファイルのアップロード FileReader API_javascript のヒント

ファイルアップロード機能は現在、Youku Video、Weiboなどのあらゆるソーシャルネットワーキングサイトやメディアサイトで写真やビデオのアップロードなどの機能を提供することが多くなってきています。しかし、これまでの WEB プログラマーは、HTML フォームを使用してファイルをアップロードするのは非常に面倒で、特にユーザーがアップロードしたファイルの属性を知りたい場合は、アップロードが完了するまで待たなければならないことを認識していました。

不明なものをサーバーにアップロードすると、セキュリティ上の問題が発生したり、大きすぎて許容サイズを超えてスペースを無駄にしたりする可能性があります。さてさて、WEB技術は進歩しており、HTML5は多くの良いことをもたらしてくれています。この FileReader API を使用すると、ユーザーがファイルをアップロードする前に、アップロードされたファイルのいくつかの基本プロパティを取得できます。

HTML コード

この FileReader API は File API と同じように動作し、input[type="file"] 要素を使用する必要があります:

<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->
<div id="destination"></div>

File API の記事には、アドレス、ボリューム、サイズ、ファイル タイプなど、読み取ることができるファイルに関する詳細情報が記載されています。

JavaScript

この例では、入力フォームフィールドを使用して画像をアップロードします。ユーザーが自分のコンピュータで画像を選択すると、その画像がページに表示されます。

document.getElementById('upload-file').addEventListener('change', function() {
 var file;
 var destination = document.getElementById('destination');
 destination.innerHTML = '';

 // 循环用户多选的文件
 for(var x = 0, xlen = this.files.length; x < xlen; x++) {
 file = this.files[x];
 if(file.type.indexOf('image') != -1) { // 非常简单的交验

  var reader = new FileReader();

  reader.onload = function(e) {
  var img = new Image();
  img.src = e.target.result; // 显示图片的地方

  destination.appendChild(img);
  };
  
  reader.readAsDataURL(file);
 }
 }
});

この例では、FileReader の readAsDataURL メソッドを使用して画像コンテンツを Base64 でエンコードされた文字列に変換し、画像のデータ URI を使用して表示します。他の FileReader 読み取りメソッドには、readAsText、readAsArrayBuffer、readAsBinaryString などが含まれます。

この FileReader API を使用すると、ユーザーが最初にサーバーにファイルをアップロードすることを回避し、ブラウザ クライアント上でファイルを操作できるようになります。サーバーにアップロードする前にこれらの前処理が必要です。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。