☰

JavaScript ファイルのアップロードサイズ検証 質問する

tag-icon • tag-icon javascript validation file-upload
JavaScript ファイルのアップロードサイズ検証 質問する

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

ベストアンサー1

はい、使えますファイル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>

少し話題から外れますが、クライアント側の検証はサーバー側の検証の代わりにはなりません。クライアント側の検証は、より優れたユーザー エクスペリエンスを提供できるようにするためのものです。たとえば、5 MB を超えるファイルのアップロードを許可しない場合は、クライアント側の検証を使用して、ユーザーが選択したファイルのサイズが 5 MB を超えていないことを確認し、超えている場合はわかりやすいメッセージを表示できます (ユーザーがアップロードに時間を費やしても、サーバーで結果が破棄されることはありません)。ただし、クライアント側の制限 (およびその他の検証) はすべて回避できるため、サーバー側でもその制限を適用する必要があります。

おすすめ記事