web-dev-qa-db-ja.com

ファイルアップロードの選択を特定のタイプに制限する

とにかく<input type="file" />要素を介してファイルタイプの選択を制限するには？

たとえば、画像タイプのみをアップロードしたい場合、可能な選択を（image/jpg、image/gif、image/png）に制限し、選択ダイアログは他のMIMEタイプのファイルをグレーアウトします。

追伸File APIを使用して.type属性をスキャンすることで、これを実行できることを知っています。私は実際にこれを事前に制限しようとしています..フラッシュを介してこれを行うことができることも知っていますが、これにはフラッシュを使用したくありません。

html5file-uploadfileapi
48
ndmweb

この特定の目的のためのacceptと呼ばれるhtml属性がありますが、ブラウザ間でのサポートはほとんどありません。このため、代わりにサーバー側の検証をお勧めします。

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

バックエンドにアクセスできない場合は、 SWFUpload のようなフラッシュベースのソリューションをご覧ください。

詳細についてはこちらをご覧ください： ファイル入力 'accept'属性-便利ですか？

63
amosrivera

ユーザーが任意のファイルを選択できるようにしてから、そのタイプを確認することをお勧めします-これはブラウザーでよりよくサポートされています：

var
    file = (el[0].files ? el[0].files[0] : el[0].value || undefined),
    supportedFormats = ['image/jpg','image/gif','image/png'];

if (file && file.type) {
    if (0 > supportedFormats.indexOf(file.type)) {
        alert('unsupported format');
    }
    else {
        upload();
    }
}

file.sizeプロパティを使用してファイルサイズを確認することもできます。

8
Radek Pech