web-dev-qa-db-ja.com

jQueryでアップロード時のファイルタイプを制限するにはどうすればよいですか？

JQueryでファイルアップロードフィールドをjpg/jpeg、png、およびgifのみに制限したいと思います。 PHPで既にバックエンドチェックを行っています。私はすでにJavaScript関数を介して送信ボタンを実行しているので、送信または警告する前にファイルタイプを確認する方法を知っている必要があります。

javascriptjqueryfile-uploadfile-type
132
Anthony

ファイルフィールドの値は、他のフィールドと同じように取得できます。ただし、変更することはできません。

表面的にファイルの拡張子が正しいかどうかを確認するには、次のようにします。

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}
269
Paolo Bergantino

このタスクにプラグインは必要ありません。他のいくつかのスクリプトからこれをまとめました：

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

ここでのコツは、有効なファイルの種類が選択されない限り、アップロードボタンを無効に設定することです。

37
Christian

JQueryの検証プラグインを使用できます。 http://docs.jquery.com/Plugins/Validation

たまたま必要なことを正確に行うaccept（）ルールがあります： http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

ファイル拡張子を制御することは、ファイルのmimetypeとはまったく関係がないため、完全ではありません。したがって、Word文書である.pngと、完全に有効なpng画像である.docを作成できます。サーバー側でより多くのコントロールを作成することを忘れないでください;）

27
Julian Aubourg

フロントエンドでは、ファイルフィールドを使用している場合、 'accept'属性を配置すると非常に便利です。

例：

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

重要な注意事項：

24
dhruvpatel

ユーザーが嘘をついている範囲ではなく、MIMEをチェックしたくないですか？その場合は、1行未満です。

<input type="file" id="userfile" accept="image/*|video/*" required />
19
Leo

私の場合、次のコードを使用しました：

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }
4
vanessen

私は実際のコード例を書き、テストし、すべてが機能するようにします。

うさぎはコードです：

HTML：

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

Javascript：

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}
2
Avtandil Kavrelishvili

この例では、PNG画像のみをアップロードできます。

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });
1
Developer

このコードは正常に機能しますが、唯一の問題は、ファイル形式が指定されたオプション以外の場合、警告メッセージを表示しますが、無視する必要があるファイル名を表示することです。

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});
1
Abhi
<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>
0
Khaihkd

複数（html 5）のファイルアップロードを処理している場合は、一番上の提案コメントを取り、少し変更しました。

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

        var ext = f.name.split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');

        }
    }
0
Jason Roner