最近のHTMLはファイル選択画面でファイル形式をこちらで指定した物以外は選択不可にできます。例えば次のコードではJPEGとPNG画像だけが選択可能になります。
<form> <input type="file" accept="image/jpeg,image/png"> </form>
PCでZipファイルをサーバへアップロードするサービスを作っていたのですが、このaccept
属性によって制限を付けると特定の環境でZipファイルが指定できない現象が発生し困ったことに。久しぶりにブラウザでZipファイルを扱ったので混乱したのですが、そういえば環境によってZipのMIMEタイプが違うのでした。
というわけで割と最近のOSとブラウザ毎にZipファイルのMIMEがどのようになっているか調査します。
検証用のコード
ボタンを押すとブラウザのコンソールに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で確認しています。
ブラウザ | Version | MIME Type |
---|---|---|
Google Chrome | 98.0 | application/zip |
FireFox | 97.0 | application/zip |
Safari | 15.3 | application/zip |
Microsoft Edge | 98.0 | application/zip |
Windows 10
Windows 10 Home(21H2)で確認しています。
ブラウザ | Version | MIME Type |
---|---|---|
Google Chrome | 98.0 | application/x-zip-compressed |
FireFox | 97.0 | application/x-zip-compressed |
Microsoft Edge | 98.0 | application/x-zip-compressed |
Internet Explorer | 11 | application/x-zip-compressed |
※FireFoxはPortable版を利用しました ※IEはいつの間にかブラウザのバージョン番号が確認できなくなってますね
まとめ
つまりPC環境でZipファイルだけを選択してもらいたい場合は、以下のように指定する必要があるということですね。
<form> <input type="file" accept="application/zip,application/x-zip-compressed"> </form>
ちなみにこのMIMEタイプはサーバへ送信する際も利用されますので、サーバ側でもチェックしている場合は同様に考慮する必要があります。