Как ограничить типы файлов jQuery при загрузке?

Question

Я хотел бы, чтобы jQuery ограничил область загрузки файла только jpg/jpeg, png и gif. Я делаю проверку бэкэнда с PHP. Я запускаю свою кнопку отправки через функцию JavaScript, поэтому мне просто нужно знать, как проверить типы файлов перед отправкой или оповещением.

Answer 1

Вы можете получить значение поля файла так же, как и любое другое поле. Однако вы не можете его изменить.

Так поверхностно проверить, если файл имеет правильное расширение, вы могли бы сделать что-то вроде этого:

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

Answer 2

Вы можете использовать плагин валидации для JQuery: http://docs.jquery.com/Plugins/Validation

Это случается у вас есть правило accept(), которое делает именно то, что вам нужно: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Обратите внимание, что управление файлом расширяется sion не является пуленепробиваемым, поскольку он никоим образом не связан с типом файла. Таким образом, у вас может быть .png, это документ с текстом и .doc, это абсолютно корректный png-образ. Поэтому не забудьте сделать больше элементов управления на стороне сервера;)

Answer 3

Плагин не нужен для этой задачи. Мощеное это вместе с парой других сценариев:

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

Хитрости здесь, чтобы установить кнопку загрузки на отключенный тех пор, пока не будет выбран недопустимый тип файла.

Answer 4

Не хотите лучше проверять MIME, чем на любом расширении, на котором лежит пользователь? Если да, то это меньше, чем одна строка:

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

Answer 5

для моего случая я использовал следующие коды:

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

Если вы имеете дело с несколькими (HTML 5) загрузки файлов, я взял верхний предложенный комментарий и немного изменил его:

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

Для внешнего интерфейса довольно удобно поместить 'accept' атрибут, если вы используете поле файла.

Пример:

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

Несколько важных примечаний:

• 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

Я стараюсь писать рабочий пример кода, я проверить его и все работает ,

Заяц Код:

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

Вот простой код для проверки кода на 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 12

Этот код работает отлично, но только вопрос, если формат файла, кроме указанных вариантов, он показывает предупреждающее сообщение, но оно отображает имя файла, в то время как оно должно быть пренебрегая его.

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

В этом примере можно загрузить только изображение 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; 
        } 
       });