Jak ustawić jQuery w ograniczaniu typów plików podczas przesyłania?

Chciałbym, aby jQuery ograniczyło pole wysyłania plików tylko do jpg / jpeg, png i gif. Robię PHPjuż sprawdzanie zaplecza . Uruchamiam już przycisk przesyłania za pomocą JavaScriptfunkcji, więc naprawdę muszę wiedzieć, jak sprawdzić typy plików przed przesłaniem lub ostrzeżeniem.

Możesz uzyskać wartość pola pliku tak samo, jak każdego innego pola. Nie możesz tego jednak zmienić.

Aby więc powierzchownie sprawdzić, czy plik ma odpowiednie rozszerzenie, możesz zrobić coś takiego:

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

Żadna wtyczka nie jest potrzebna tylko do tego zadania. Ułożyłem to razem z kilku innych skryptów:

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

Sztuczka polega na tym, aby ustawić przycisk wysyłania na wyłączony, chyba że i do momentu wybrania prawidłowego typu pliku.

Możesz użyć wtyczki walidacji dla jQuery: http://docs.jquery.com/Plugins/Validation

Zdarza się, że ma regułę accept (), która robi dokładnie to, czego potrzebujesz: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Zauważ, że kontrolowanie rozszerzenia pliku nie jest punktorem, ponieważ nie jest w żaden sposób powiązane z typem MIME pliku. Możesz więc mieć plik .png, który jest dokumentem Word, i .doc, który jest doskonale poprawnym obrazem png. Więc nie zapomnij zrobić więcej kontroli po stronie serwera;)

W przypadku front-endu jest całkiem wygodne umieszczenie atrybutu „ accept ”, jeśli używasz pola pliku.

Przykład:

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

Kilka ważnych uwag:

• Atrybut accept jest obsługiwany w przeglądarkach Internet Explorer 10, Firefox, Opera, Chrome i Safari 6.
• Wyświetla tekst rozszerzenia pliku inaczej w oknie dialogowym przeglądarki plików z różnych przeglądarek.

Nie chcesz sprawdzać raczej MIME niż jakiegokolwiek rozszerzenia, którego użytkownik kłamie? Jeśli tak, to jest mniej niż jedna linia:

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

w moim przypadku użyłem następujących kodów:

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

Próbuję napisać działający kod, testuję go i wszystko działa.

Zając to kod:

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

Ten kod działa dobrze, ale jedynym problemem jest to, że jeśli format pliku jest inny niż określone opcje, wyświetla komunikat ostrzegawczy, ale wyświetla nazwę pliku, podczas gdy powinien go zaniedbywać.

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

Ten przykład pozwala przesłać tylko obraz 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;
                    }
                });

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

Jeśli masz do czynienia z przesyłaniem wielu plików (html 5), wziąłem najlepszy sugerowany komentarz i trochę go zmodyfikowałem:

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

Oto prosty kod do walidacji javascript, który po sprawdzeniu wyczyści plik wejściowy.

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