1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScriptによるファイルアップロードのサイズ検証

2022-03-27 14:31:54

質問

を確認する方法はありますか? ファイルサイズ JavaScriptを使用してアップロードする前に?

解決方法を教えてください。

はい を使用することができます。 ファイルAPI を使用します。

これが完全な例です(コメント参照)。

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (Can't use `typeof FileReader === "function"` because apparently it
    // comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}
body {
    font-family: sans-serif;
}
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>


少し話がそれますが。クライアントサイドのバリデーションは 代わり映えしない サーバーサイドの検証のために。クライアントサイドの検証は純粋に、より良いユーザー体験を提供することを可能にするためのものです。例えば、5MB以上のファイルのアップロードを許可しない場合、クライアントサイドの検証を使用して、ユーザーが選択したファイルが5MB以上でないことを確認し、5MB以上の場合は親切なメッセージを表示することができます(サーバーで結果が破棄されるためだけにアップロードに時間を費やさずに済むように)、しかし、必ず また クライアント側の制限(およびその他の検証)はすべて回避することができるため、サーバー側でその制限を強制します。