52

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

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

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

4

2 に答える 2

68

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

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

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

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

于 2011-09-27T20:53:48.490 に答える
8

ユーザーに任意のファイルを選択させてから、そのタイプを確認することをお勧めします。これは、ブラウザーによってより適切にサポートされます。

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プロパティを使用してファイルサイズを確認することもできます。

于 2013-10-11T07:54:25.927 に答える