[HTML5] ZipファイルのMIMEタイプがOSによって異なる件

  • このエントリーをはてなブックマークに追加
  • LINEで送る

最近のHTMLはファイル選択画面でファイル形式をこちらで指定した物以外は選択不可にできます。例えば次のコードではJPEGとPNG画像だけが選択可能になります。

<form>
  <input type="file" accept="image/jpeg,image/png">
</form>

PCでZipファイルをサーバへアップロードするサービスを作っていたのですが、このaccept属性によって制限を付けると特定の環境でZipファイルが指定できない現象が発生し困ったことに。久しぶりにブラウザでZipファイルを扱ったので混乱したのですが、そういえば環境によってZipのMIMEタイプが違うのでした。

というわけで割と最近のOSとブラウザ毎にZipファイルのMIMEがどのようになっているか調査します。

- Sponsored Link -

検証用のコード

ボタンを押すとブラウザのコンソールにMIMEタイプを出力する簡単なファイルを用意しました。これを実行していきます。

<form>
  <input type="file" id="file">
  <button type="button" id="btn">チェック</button>
</form>

<script>
document.getElementById('file').addEventListener('click', function(){
  const file = document.getElementById('file').files[0]
  console.log(file.type)
})
</script>

検証結果

macOS

macOS Catalina 10.15.7で確認しています。

ブラウザVersionMIME Type
Google Chrome98.0application/zip
FireFox97.0application/zip
Safari15.3application/zip
Microsoft Edge98.0application/zip

Windows 10

Windows 10 Home(21H2)で確認しています。

ブラウザVersionMIME Type
Google Chrome98.0application/x-zip-compressed
FireFox97.0application/x-zip-compressed
Microsoft Edge98.0application/x-zip-compressed
Internet Explorer11application/x-zip-compressed

※FireFoxはPortable版を利用しました
※IEはいつの間にかブラウザのバージョン番号が確認できなくなってますね

まとめ

つまりPC環境でZipファイルだけを選択してもらいたい場合は、以下のように指定する必要があるということですね。

<form>
  <input type="file" accept="application/zip,application/x-zip-compressed">
</form>

ちなみにこのMIMEタイプはサーバへ送信する際も利用されますので、サーバ側でもチェックしている場合は同様に考慮する必要があります。

参考ページ

コメント

コメント欄は休止中です。お問い合わせはこちらからどうぞ。ご質問はTwitterにリプを投げてください。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -