JavaScriptでファイルアップロードAPIの詳細

Webプログラマーにとって、Webページでファイルのアップロードを処理するのは、いつも面倒なことです.過去には、画像をドラッグしてアップロードすることはできませんし、複雑なAjaxアップロード技術もありません.マルチファイルの一括アップロードを処理することはめったにありません.アップロードが完了した後、サーバ側から取得しない限り、アップロード中の情報を取得することはできません.時々、アップロードが終わってから、アップロードされたファイルが適切ではないことに気づきます.
現在、HTML 5の革命、現代ブラウザの誕生、JavaScriptのアップグレードは、Javascriptとinput[type=file]要素を使用してアップロードファイルプロセス情報を取得する能力を提供しています.
これらのアップロードファイルAPIがどのように使用されているかを見てみましょう.
アップロードするファイルリスト情報へのアクセス
すべてのinput[type=file]にアップロードするファイルのリストを取得するには、filesプロパティを使用します.

// Assuming 

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {
 console.log(uploadInput.files) // File listing!
});

残念なことに、このFileListにはforEachという方法はありません.そのため、古いループテクニックを使用してFileListをループ操作するしかありません.

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
 console.log(files[i]);
}

重要なのは、FileListにlength属性があることです.
単一のアップロードファイルの情報を取得
FileListの各ファイルオブジェクトには、ファイルのボリュームサイズ、ファイルMIMEタイプ、最終修正時間、ファイル名など、このファイルに関する情報が大量に保存されています.

{
 lastModified: 1428005315000,
 lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
 name: "profile.pdf",
 size: 135568,
 type: "application/pdf",
 webkitRelativePath: ""
}

これらの基礎情報が私たちにとって最大の用途は、ファイルをアップロードする前に検証できることです.たとえば、ファイルのタイプとボリュームのサイズを確認できます.

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {
 totalSize += files[i].size;
 if(totalSize > maxAllowedSize) {
 // Notify the user that their file(s) are too large
 }

 if(files[i].type != 'application/pdf') {
 // Notify of invalid file type for file in question
 }
}

ユーザーがアップロードしたファイルのボリュームが大きすぎて、許容範囲を超えているか、アップロードのタイプが間違っている場合は、ユーザーのアップロードを阻止し、必要なヒントを与えることができます.なぜアップロードに成功できないのか.
以上、ファイルアップロードAPIについて簡単に紹介しましたが、皆さんの勉強に役立つことを願っています.