jQuery cách kiểm tra xem tệp đã tải lên có phải là hình ảnh mà không kiểm tra tiện ích mở rộng không?

Question

Người mới ở đây. Vấn đề là tôi hiện đã viết một phương pháp kiểm tra kích thước và phần mở rộng của tệp được tải lên để xác thực nó. Tuy nhiên, việc kiểm tra các phần mở rộng không phải là một giải pháp vì loại xác thực đó có thể gây ra nhiều vấn đề. Những gì tôi muốn làm là kiểm tra loại tệp thực và xác thực nó mà không sử dụng phương pháp mở rộng. Tôi đã cố gắng sử dụng jQuery file validator nhưng không có kết quả ... Đây là một đoạn trích từ mã hiện tại của tôi:

<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' /> 

Script:

App.Dispatcher.on("uploadpic", function() {   
     $(":file").change(function() { 
      if (this.files && this.files[0] && this.files[0].name.match(/\.(jpg|jpeg|png|gif)$/)) { 
       if(this.files[0].size>1048576) { 
        alert('File size is larger than 1MB!'); 
       } 
       else { 
        var reader = new FileReader(); 
        reader.onload = imageIsLoaded; 
        reader.readAsDataURL(this.files[0]); 
       } 
      } else alert('This is not an image file!'); 
     }); 
     function imageIsLoaded(e) { 
      result = e.target.result; 
      $('#image').attr('src', result); 
     }; 
    }); 

Nó được gọi là một lần thay đổi upload đầu vào và sau khi xác nhận nó tải lên và hiển thị hình ảnh. Hiện tại, tôi chỉ quan tâm đến việc xác thực và bất kỳ trợ giúp hoặc ý tưởng nào sẽ được đánh giá cao!

Answer 1

Hãy thử một cái gì đó như thế này:

var file = this.files[0]; 
var fileType = file["type"]; 
var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"]; 
if ($.inArray(fileType, ValidImageTypes) < 0) { 
    // invalid file type code goes here. 
} 

Answer 2

Những gì tôi muốn làm là để kiểm tra các loại tập tin thực tế

Thử truy cập files[0].type tài sản. Xem Using files from web applications

$(":file").on("change", function(e) { 
 

 
    console.log(this.files[0].type); 
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />

Answer 3

Xin vui lòng tham khảo một truy vấn liên quan here. Câu trả lời ở đây gợi ý để tải hình ảnh trong một đối tượng Hình ảnh và kiểm tra xem các thuộc tính chiều rộng và chiều cao của nó có khác không. Tôi nghĩ rằng kỹ thuật này có thể được sử dụng để giải quyết vấn đề của bạn.

Tôi cũng đã làm việc ra một số fiddle để bạn tham khảo. đang thích hợp dưới đây:

var img = new Image(); 
img.addEventListener("load",function(){ 
    alert('success'); 
}); 
img.addEventListener("error",function(){ 
     alert('error'); 
}); 
    img.src = picFile.result; 

Answer 4

Bạn không cần phải jquery đây.

var mimeType=this.files[0]['type'];//mimeType=image/jpeg or application/pdf etc... 


//ie image/jpeg will be ['image','jpeg'] and we keep the first value 
    if(mimeType.split('/')[0]=='image'){ 
     console.log('the file is image'); 
    } 

Bạn cũng có thể tạo chức năng kiểm tra thời điểm tệp là hình ảnh.

function isImage(file){ 
    return file['type'].split('/')[0]=='image');//returns true or false 
} 

isImage(this.file[0]); 

Answer 5

Đây là một mẹo nhanh chóng nếu bạn chỉ muốn biết nếu tập tin là một hình ảnh:

var file = this.files[0]; 
var fileType = file["type"]; 

if (fileType.search('image') >= 0) { 
    ... 
}