Как проверить расширение файла в файле типа ввода с помощью JQuery?

Question

HTML:

<input type="file" name="group_documents_file" id="group_documents_file" class="group-documents-file" />

Правило: файл для загрузки должен иметь расширение JPEG, GIF или PNG, в противном случае должно отображаться предупреждение.

Answer 1

См. Здесь: получить имя файла для загрузки файла в документе через javascript о том, как получить имя файла:

var extension = $('#group_documents_file').val().match(/[^.]+$/).pop().toLowerCase();

Это должно дать вам что-нибудь после точки в имени файла.

EDIT:

Если вы не хотите использовать regEx, я бы порекомендовал использовать split, с pop:

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

---

Затем, чтобы проверить допустимые расширения, сделайте следующее:

if ( ~$.inArray(extension, ['jpg', 'jpeg', 'gif', 'png']) ) {
    // correct file type...
} else {
    // incorrect file type...
}

Answer 2

Вам просто нужно вытащить значение элемента:

var fileName = $('#group_document_file').val();

var extension = fileName.slice('.')[fileName.slice('.').length - 1].toLowerCase();

if(extension == 'jpeg' || extension == 'gif' || extension == 'png')
   // Show Validated Image
else
   alert('Choose a supported image format');

Answer 3

Попробуйте это

var fName = $('#group_document_file').val();

var validExtns ["jpg", "gif", "png"];

var extn = fName.slice('.')[fName.slice('.').length - 1];

if($.inArray(extn.toLowerCase(), validExtns) != -1){
   // Show Validated Image
}
else{
   alert('Invalid image format');
}

Answer 4

Расширение файла получает следующее:

JS:

$('#group_documents_file').change(function(){
    var value = this.value;
    val = value.split("\\");
    var file = (val[val.length - 1]).split('.');
    var ext = file[file.length - 1];
    alert(ext);
})

Скрипка: http://jsfiddle.net/maniator/gveqX/