jquery - Проверьте расширение файла перед загрузкой

Question

Я использую uploaded для загрузки файлов с помощью Codeigniter. И перед загрузкой файла мне просто нужно проверить правильность правильного расширения файла или нет. Я пробовал с http://jquery.bassistance.de/, а также http://forum.jquery.com/

Бур не получил должного результата. Может ли кто-нибудь рассказать мне, как я могу сделать то же самое?

Заранее спасибо ...

Answer 1

Я хотел бы поблагодарить человека, который отправил ответ, но он удалил пост. Мы можем сделать это так.

$("#yourElem").uploadify({ 
    'uploader': ..., 
    'script': ... 
    'fileExt' : '*.jpg;*.gif;', //add allowed extensions 
    ....., 
    'onSelect': function(e, q, f) { 
     var validExtensions = ['jpg','gif']; //array of valid extensions 
     var fileName = f.name; 
     var fileNameExt = fileName.substr(fileName.lastIndexOf('.') + 1); 
     if ($.inArray(fileNameExt, validExtensions) == -1){ 
      alert("Invalid file type"); 
      $("#yourElem").uploadifyCancel(q); 
      return false; 
     } 
    } 
}); 

Спасибо за ответ, он действительно работал ...

Answer 2

Если вы хотите сделать это без плагина вы можете использовать следующее.

Javascript, с помощью JQuery:

$(document).ready(function(){ 
    $("#your_form").submit(function(submitEvent) { 

     // get the file name, possibly with path (depends on browser) 
     var filename = $("#file_input").val(); 

     // Use a regular expression to trim everything before final dot 
     var extension = filename.replace(/^.*\./, ''); 

     // Iff there is no dot anywhere in filename, we would have extension == filename, 
     // so we account for this possibility now 
     if (extension == filename) { 
      extension = ''; 
     } else { 
      // if there is an extension, we convert to lower case 
      // (N.B. this conversion will not effect the value of the extension 
      // on the file upload.) 
      extension = extension.toLowerCase(); 
     } 

     switch (extension) { 
      case 'jpg': 
      case 'jpeg': 
      case 'png': 
       alert("it's got an extension which suggests it's a PNG or JPG image (but N.B. that's only its name, so let's be sure that we, say, check the mime-type server-side!)"); 

      // uncomment the next line to allow the form to submitted in this case: 
//   break; 

      default: 
       // Cancel the form submission 
       submitEvent.preventDefault(); 
     } 

    }); 
}); 

HTML:

<form id="your_form" method="post" enctype="multipart/form-data"> 
    <input id="file_input" type="file" /> 
    <input type="submit"> 
</form> 

Answer 3

Вы можете достичь этого с помощью JQuery

HTML

<input type="file" id="FilUploader" /> 

JQuery

$("#FilUploader").change(function() { 
     var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp']; 
     if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) { 
      alert("Only formats are allowed : "+fileExtension.join(', ')); 
     } 
    }); 

Для получения дополнительной информации Click Here

Answer 4

 function yourfunctionName() { 
      var yourFileName = $("#yourinputfieldis").val(); 

      var yourFileExtension = yourFileName .replace(/^.*\./, ''); 
      switch (yourFileExtension) { 
       case 'pdf': 
       case 'jpg': 
       case 'doc': 
        $("#formId").submit();// your condition what you want to do 
        break; 
       default: 
        alert('your File extension is wrong.'); 
        this.value = ''; 
      } 
//    $("#upload_" + id).submit(); 
     } 

Answer 5

Вот простой код для проверки кода на JavaScript, и после проверки он будет очистить входной файл.

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

Если вы не хотите использовать $(this).val(), вы можете попробовать:

var file_onchange = function() { 
    var input = this; // avoid using 'this' directly 

    if (input.files && input.files[0]) { 
    var type = input.files[0].type; // image/jpg, image/png, image/jpeg... 

    // allow jpg, png, jpeg, bmp, gif, ico 
    var type_reg = /^image\/(jpg|png|jpeg|bmp|gif|ico)$/; 

    if (type_reg.test(type)) { 
     // file is ready to upload 
    } else { 
     alert('This file type is unsupported.'); 
    } 
    } 
}; 

$('#file').on('change', file_onchange); 

Надеется, что это помогает!

Answer 7

Следующий код позволяет загружать файлы gif, png, jpg, jpeg и bmp.

var extension = $('#your_file_id').val().split('.').pop().toLowerCase(); 

if($.inArray(extension, ['gif','png','jpg','jpeg','bmp']) == -1) { 
    alert('Sorry, invalid extension.'); 
    return false; 
}