Come limitare i tipi di file jQuery al caricamento?

Question

Mi piacerebbe che jQuery limiti un campo di caricamento file solo a jpg/jpeg, png e gif. Sto già facendo il backend di controllo con PHP. Sto facendo funzionare il mio pulsante di invio tramite una funzione JavaScript quindi ho davvero bisogno di sapere come verificare i tipi di file prima di inviare o avvisare.

Answer 1

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

Quindi, per superficialmente controllare se un file ha l'estensione a destra, si potrebbe fare qualcosa di simile:

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

Answer 2

è possibile utilizzare il plugin di convalida per jQuery: http://docs.jquery.com/Plugins/Validation

Succede a avere una regola accept() che fa esattamente ciò che ti serve: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Nota che il file di controllo si estende Sion non è a prova di proiettile poiché non è in alcun modo correlato al mimetype del file. Quindi potresti avere un file .png che è un documento word e un .doc che è un'immagine png perfettamente valida. Quindi non dimenticare di effettuare più controlli sul lato server;)

Answer 3

Nessun plug-in necessario per questa attività. Acciottolato questo 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 è quello di impostare il pulsante Carica per portatori di handicap a meno che e fino a selezionare un tipo di file valido.

Answer 4

Non si desidera controllare piuttosto su MIME che su qualsiasi estensione l'utente stia mentendo? Se è così allora è meno di una riga:

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

Answer 5

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 6

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 7

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

Se hai a che fare con più (HTML 5) caricamento di file, ho preso il commento suggerito in alto e modificato leggermente:

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 9

Per il front-end è piuttosto comodo attribuire l'attributo 'accept' 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:

• The accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6.
• It will show text for file extension differently in the file browser dialog from different browsers.

Answer 10

provo a scrivere lavorare esempio di codice, i test e tutto funziona .

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

Answer 11

Ecco un semplice codice JavaScript convalida, e dopo che lo 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(""); 
    } 
} 

Answer 12

Questo codice funziona bene, ma l'unico problema è che se il formato del file è diverso da opzioni specificate, mostra un messaggio di avviso, ma viene visualizzato il nome del file, mentre dovrebbe essere trascurato esso.

$('#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 13

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