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

Question

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

Answer 1

Puoi ottenere il valore di un campo file esattamente come qualsiasi altro campo. Non puoi modificarlo, tuttavia.

Quindi, per superficialmente verificare 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!');
}

Answer 2

Nessun plugin necessario solo per questa attività. Compilato 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.

Answer 3

È 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

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

Answer 4

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.
• It mostrerà il testo per l'estensione del file in modo diverso nella finestra di dialogo del browser dei file da diversi browser.

Answer 5

Non vuoi controllare piuttosto il MIME piuttosto che l'estensione che sta mentendo l'utente? Se è così, allora è meno di una riga:

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

Answer 6

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

Answer 7

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

La lepre è 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
    }
}

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

        }
    }

Answer 12

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

Answer 13

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