JavaScript_javascriptスキルでのファイルアップロードAPIの詳細説明

Web プログラマーにとって、Web ページへのファイルのアップロードの処理は常に面倒な作業です。以前は、ドラッグ アンド ドロップで画像をアップロードできず、複雑な Ajax アップロード テクノロジもなく、複数のファイルのバッチ アップロードを処理することはほとんどありませんでした。また、アップロード完了後にサーバーから情報を取得しない限り、アップロード処理中に情報を取得することはできません。場合によっては、アップロードが完了した後に、アップロードしたファイルが不適切であることに気づくことがあります。

今日、HTML5 の革命、最新のブラウザーの誕生、JavaScript のアップグレードにより、JavaScript と input[type=file] 要素を使用してファイルのアップロード プロセスに関する情報を取得できるようになりました。

これらのアップロード ファイル API の使用方法を見てみましょう。

アップロードするファイルリスト情報にアクセスします

すべての input[type=file] でアップロードするファイルのリストを取得したい場合は、files 属性を使用する必要があります:

// Assuming <input type="file" id="upload" multiple>

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 属性があります。

アップロードされた 1 つのファイルに関する情報を取得します

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 の簡単な紹介です。皆さんの学習に役立つことを願っています。