ホームページ >ウェブフロントエンド >jsチュートリアル >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 API を使用すると、ユーザーが最初にサーバーにファイルをアップロードすることを回避し、ブラウザ クライアント上でファイルを操作できるようになります。サーバーにアップロードする前にこれらの前処理が必要です。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。