Yükleme sırasında jQuery dosya türlerini nasıl kısıtlayabilirim?

JQuery sadece jpg / jpeg, png ve gif bir dosya yükleme alanı sınırlamak istiyorum. Ben PHPzaten ile arka uç kontrol yapıyorum . Gönder düğmemi JavaScriptzaten bir işlev aracılığıyla çalıştırıyorum, bu yüzden gerçekten sadece göndermeden veya uyarmadan önce dosya türlerini nasıl kontrol edeceğinizi bilmem gerekiyor.

Bir dosya alanının değerini diğer tüm alanlarla aynı şekilde alabilirsiniz. Ancak bunu değiştiremezsiniz.

Dolayısıyla, bir dosyanın doğru uzantıya sahip olup olmadığını yüzeysel olarak kontrol etmek için şöyle bir şey yapabilirsiniz:

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

Sadece bu görev için eklenti gerekmez. Bunu birkaç senaryodan birlikte topladı:

$('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 = '';
    }
});

Buradaki hile, geçerli bir dosya türü seçilmedikçe ve yüklenene kadar karşıya yükleme düğmesini devre dışı olarak ayarlamaktır.

JQuery için doğrulama eklentisini kullanabilirsiniz: http://docs.jquery.com/Plugins/Validation

Tam olarak ihtiyacınız olanı yapan bir accept () kuralına sahip olur: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Dosya uzantısını kontrol etmenin, dosyanın mime türü ile hiçbir şekilde ilişkili olmadığından kurşun geçirmez olmadığını unutmayın. Yani bir kelime belgesi olan bir .png ve mükemmel derecede geçerli bir png resmi olan bir .doc olabilir. Yani sunucu tarafında daha fazla kontrol yapmayı unutmayın;)

Ön uç için, bir dosya alanı kullanıyorsanız ' kabul ' niteliği koymak oldukça uygundur .

Misal:

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

Birkaç önemli not:

• Kabul özelliği Internet Explorer 10, Firefox, Opera, Chrome ve Safari 6'da desteklenir.
• Dosya tarayıcı metnini farklı tarayıcılardan dosya tarayıcı iletişim kutusunda farklı gösterecektir.

MIME üzerinde kullanıcının yalan söylediği herhangi bir uzantıdan ziyade kontrol etmek istemiyor musunuz? Eğer öyleyse, o zaman birden fazla satır vardır:

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

benim durumum için aşağıdaki kodları kullandım:

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

Çalışma kodu örneği yazmaya çalışıyorum, test ediyorum ve her şey çalışıyor.

Tavşan kodu:

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
    }
}

Bu kod iyi çalışıyor, ancak tek sorun dosya formatı belirtilen seçeneklerden farklıysa, bir uyarı mesajı gösterir, ancak ihmal edilmesi gereken dosya adını görüntüler.

$('#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; }
});

Bu örnek yalnızca PNG görüntüsünün yüklenmesine izin verir.

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;
                    }
                });

<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>

Birden fazla (html 5) dosya yüklemesi ile ilgileniyorsanız, önerilen en iyi yorumu aldım ve biraz değiştirdim:

    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!');

        }
    }

    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';

function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }

Javascript doğrulaması için basit bir kod ve doğruladıktan sonra giriş dosyasını temizleyecektir.

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}