jQuery - INPUT type = Tệp, tùy chọn Xác thực Loại tệp Hình ảnh?

Question

tôi có như sau:

<input id="user_profile_pic" name="user[profile_pic]" type="file"> 

Trên máy chủ tôi kiểm tra để chắc chắn rằng nó là một hình ảnh, nhưng tôi muốn kiểm tra trên clientside đầu tiên.

Làm cách nào để jQuery có thể cảnh báo người dùng nếu tệp đầu vào tệp được chọn không phải là gif, jpg, png hoặc bmp?

Cảm ơn

Answer 1

Bạn muốn kiểm tra những gì giá trị của nguyên tố này là, một cái gì đó dọc theo dòng:

$("#user_profile_pic").change(function() { 

    var val = $(this).val(); 

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
     case 'gif': case 'jpg': case 'png': 
      alert("an image"); 
      break; 
     default: 
      $(this).val(''); 
      // error message here 
      alert("not an image"); 
      break; 
    } 
}); 

Sửa

thay đổi Mã dựa trên nhận xét - bây giờ loại bỏ giá trị của các tập tin được lựa chọn nếu không phải là một hình ảnh.

Answer 2

Bạn có thể sử dụng một biểu thức chính quy:

var val = $("#user_profile_pic").val(); 
if (!val.match(/(?:gif|jpg|png|bmp)$/)) { 
    // inputted file path is not an image of one of the above types 
    alert("inputted file path is not an image!"); 
} 

Tất nhiên bạn có thể thêm các định dạng hơn để các biểu thức chính quy. Có nhiều cách phức tạp và toàn diện hơn để thực hiện việc này, nhưng phương pháp này sẽ hoàn thành nhiệm vụ miễn là đường dẫn tệp hình ảnh kết thúc bằng phần mở rộng tệp hình ảnh chuẩn.

Answer 3

Có thể có các trình duyệt cho phép bạn tạo <img/> của đường dẫn đã cho, bạn có thể kiểm tra xem đó có phải là hình ảnh thực hay không (nếu không phải sự kiện onerror sẽ kích hoạt hình ảnh và nó sẽ có chiều rộng/chiều cao là 0).

Nhưng vì điều này chỉ hoạt động trong một số trình duyệt và là một nguy cơ bảo mật (trong tâm trí của tôi), tôi sẽ không đề xuất làm điều này, vì vậy câu trả lời của tôi là: bạn không thể xác thực ở đó.

Kiểm tra các phần mở rộng tệp như đề xuất của Alex có thể là một tùy chọn, nhưng phần mở rộng tệp không đảm bảo nếu đó là hình ảnh. Tuy nhiên, như là một kiểm tra trước đơn giản (không xác nhận) nó có thể hữu ích.

Answer 4

Rất đơn giản, không cần bất kỳ xác thực JavaScript nào. Chỉ cần viết và nó sẽ chỉ chấp nhận các tệp hình ảnh.

<input type="file" multiple accept='image/*'> 

Answer 5

Làm cách nào để kiểm tra, người dùng đó có chọn tệp hình ảnh không?

• Bằng cách xác nhận mở rộng tập tin
  Đó là công việc như mong đợi, tập tin văn bản với .png mở rộng vượt qua đây
• input[type=file][accept=image/*] Nó ban đầu ẩn non-image tập tin từ người dùng. Nhưng bộ lọc này cũng hoạt động theo các phần mở rộng. Và người dùng vẫn có thể nhập thủ công bất kỳ tên tệp hiện có nào.

• Chúng tôi có thể kiểm tra loại kết quả mime dataUrl, bắt đầu bằng data:mimetype;base64,.... Vì vậy, chúng tôi cần image/* mimetype.

  var file = $('#uploadfile'); 
  file.on('change', function (e) { 
      var reader = new FileReader(); 
  
      reader.onload = function() { 
       var data = reader.result; 
       if (data.match(/^data:image\//)) { 
        $('#thumbnail').attr('src', data); 
       } else { 
        console.error('Not an image'); 
       } 
      }; 
  
      reader.readAsDataURL(file.prop('files')[0]); 
  });