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


133

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.

Odpowiedzi:


280

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

18
I $("#my_upload_form").bind("submit", function() { // above check });
przypisz

7
możesz użyć$('#file_field').change(function(){// above check});
makki

3
$("#my_upload_form").bind("submit", function() { // above check });powinien być teraz powiązany za pomocą $("#my_upload_form").submit(function() { // above check }); api.jquery.com/submit . możesz również zapobiec przesyłaniu formularza za pomocą$("#my_upload_form").submit(function(e) { // above check e.preventDefault(); });
Liam,

1
W tym przypadku, gdyby użytkownik dodał ".jpg" np. Plik MS Word, FileUpload zaakceptowałby ten plik jako obraz. Myślę, że to nie w porządku.
Jeyhun

3
Warto stwierdzić, że nie jest to metoda niezawodna. Na koniec dnia upewnij się, że Twój backend sprawdza kilka pierwszych bajtów pliku, aby upewnić się, że jest to typ pliku, który naprawdę chcesz. Inną rzeczą do przemyślenia jest to, że w Linuksie i OSX możesz mieć plik bez rozszerzenia, które jest faktycznie takiego typu, jakiego chcesz .. więc to również by się nie udało
chris

39

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


6
przepraszam stary, ale to zły regex. pliki mogą mieć kropki w nazwie. "giel.asd.aaaaa.jpg.png" .match (/\.(.+)$/)
Tim Kretschmer,

27

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


czy możesz podać przykład, jak tego używać z plugins.krajee.com/file-input#option-allowedfileextensions w IE11
shorif2000

25

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:


1
O wiele lepsze niż używanie JQuery
Christopher Grigg

19

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

nie dostaje tego, czego potrzebuje. to tylko dla łatwiejszej obsługi, aby wybrać obraz z folderu z innym rozszerzeniem. jak widać tutaj -> imageshack.us/a/img20/8451/switchzz.jpg
bernte

Ponieważ nie szkodzi IE <10 i nie szkodzi innym kodom, jest to skuteczne ograniczenie tego, co próbujesz ograniczyć.
Leo

4

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

3

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

1

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

1

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

Czy mógłbyś zasugerować, jak ograniczyć rozmiar obrazu. Na przykład obraz o rozmiarze 10 MB nie powinien akceptować
PDSSandeep

@PDSSandeep Sprawdź ten link pls stackoverflow.com/questions/6575159/ ...
Deweloper

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

To nie może sprawdzić typu i rozmiaru pliku, przetestowanego w FF.
Qammar Feroz

0

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

        }
    }

0
    $("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 = '';

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

-1

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("");
    }
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.