Come fare in modo che jQuery limiti i tipi di file al caricamento?

Vorrei che jQuery limitasse un campo di caricamento di file a solo jpg / jpeg, png e gif. Sto PHPgià controllando il backend . Sto già eseguendo il mio pulsante di invio tramite una JavaScriptfunzione, quindi devo solo sapere come verificare i tipi di file prima di inviare o avvisare.

È possibile ottenere il valore di un campo file esattamente come qualsiasi altro campo. Non puoi modificarlo, comunque.

Quindi per verificare superficialmente se un file ha l'estensione giusta, puoi fare qualcosa del genere:

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

Nessun plugin necessario solo per questa attività. Combinato insieme da un paio di altri script:

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

Il trucco qui è impostare il pulsante di caricamento su disabilitato a meno che e fino a quando non viene selezionato un tipo di file valido.

È possibile utilizzare il plug-in di convalida per jQuery: http://docs.jquery.com/Plugins/Validation

Capita di avere una regola accept () che fa esattamente quello che ti serve: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Si noti che il controllo dell'estensione del file non è a prova di proiettile poiché non è in alcun modo correlato al mimetype del file. Quindi potresti avere un .png che è un documento word e un .doc che è un'immagine png perfettamente valida. Quindi non dimenticare di rendere più controlli lato server;)

Per il front-end è abbastanza conveniente inserire l'attributo ' accetta ' se si utilizza un campo file.

Esempio:

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

Un paio di note importanti:

• L'attributo accetta è supportato in Internet Explorer 10, Firefox, Opera, Chrome e Safari 6.
• Mostrerà il testo per l'estensione del file in modo diverso nella finestra di dialogo del browser dei file da diversi browser.

Non vuoi controllare piuttosto il MIME piuttosto che l'estensione che l'utente sta mentendo? In tal caso, è inferiore a una riga:

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

per il mio caso ho usato i seguenti codici:

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

Provo a scrivere un esempio di codice funzionante, lo collaudo e tutto funziona.

La lepre è il codice:

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

Questo codice funziona bene, ma l'unico problema è se il formato del file è diverso dalle opzioni specificate, mostra un messaggio di avviso ma mostra il nome del file mentre dovrebbe trascurarlo.

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

Questo esempio consente di caricare solo immagini 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>

Se hai a che fare con più caricamenti di file (html 5), ho preso il commento più consigliato e l'ho modificato un po ':

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

Ecco un semplice codice per la convalida javascript e dopo la convalida pulirà il file di input.

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