ファイルを送信したあとに「形式が違います」「容量が大きすぎます」と分かると、選び直しからやり直しになります。ブラウザでは選択されたファイルの名前、サイズ、種類を送信前に確認できます。
ただし、ファイル名の末尾が.csvでも、中身が正しいCSVとは限りません。画面での確認はファイルの取り違えに気づくための補助です。アップロードを受ける側では、許可する形式、サイズ、内容を別に検査します。
選択したファイルを表示する
次の例はCSVを1件選び、1MiB以下かを確認する画面です。1MiBは1,048,576バイトで、この練習用の上限です。実際の業務では処理できる件数や通信条件に合わせて決めます。
<label for="csv-file">確認するCSV</label>
<input id="csv-file" type="file" accept=".csv,text/csv">
<p id="file-info" role="status">ファイルは選択されていません。</p>
<script>
const fileInput = document.getElementById('csv-file');
const info = document.getElementById('file-info');
const MAX_BYTES = 1024 * 1024;
function describeFile(file) {
if (!file) return 'ファイルは選択されていません。';
if (!file.name.toLowerCase().endsWith('.csv')) {
return 'CSVファイルを選んでください。まだ送信していません。';
}
if (file.size > MAX_BYTES) {
return 'この例の上限1MiBを超えています。まだ送信していません。';
}
return file.name + ' / ' + file.size + 'バイト / 種類: '
+ (file.type || '未提供') + '。選択内容のみ確認。送信はしていません。';
}
fileInput.addEventListener('change', () => {
info.textContent = describeFile(fileInput.files[0]);
});
</script>
このHTMLは選択したファイルの情報を表示するだけです。ファイルの内容を読み取ったり、外部へ送ったりする処理はありません。名前に記号が入っていても、textContentで文字として表示します。
acceptを内容検査と取り違えない
acceptは、ファイル選択画面で選ぶ種類を示す指定です。ファイルの中身を確かめる機能ではなく、利用者が別の種類を選べる環境もあります。コードでも拡張子を確認していますが、拡張子を変えたファイルまで正しい形式と見分けられるわけではありません。
file.typeも、必ず信頼できる内容判定ではありません。環境やファイルによって空文字列になることもあるので、この例では「未提供」と表示します。種類が取れなかったからといって、同じCSVへ勝手に別の種類を付けて扱う処理にはしていません。
CSVとして読み込む段階では、文字コード、列数、引用符、必須の見出しなどを検査します。送る前の情報確認と、読み込み後のデータ検査を分けることで、利用者へ伝える理由も具体的になります。
サイズと行数を分けて考える
ファイルサイズが上限内でも、列数や1セルの長さによって後続の処理負荷は変わります。サイズ確認を通ったという結果を、集計まで成功する保証にはしません。実務で上限を決めるときは、処理に使う側の制約も確認します。
この例では空のファイルもサイズだけなら通ります。データがないことをエラーにしたい場合は、内容を読む段階で空ファイルと見出しだけのファイルを区別します。画面のメッセージも「選択内容のみ確認」とし、取込済みや送信済みとは表示しません。
練習では拡張子違い、上限を超えたファイル、種類が空のファイルを試します。ローカルのブラウザでこの分岐は確認できますが、サーバーでの受入検査や実データの解析は含みません。実際のアップロードを追加した後は、選択したファイルと受信したファイルが対応することも確認してください。
