загрузки файла: проверьте, если изображение правильного

Question

Я хочу, чтобы загрузить файл, как это:

<input type="file" name="uploadPicture"/> 

Есть ли способ, чтобы выяснить, в JavaScript, если выбранный файл является действительным изображением?

Я знаю, что могу проверить расширение файла. Проблема в том, что кто-то может изменить файл .txt на .jpg, и он пройдет проверку.

Answer 1

Во-первых, добавить accept="image/*" на ввод данных, чтобы принимать только файлы изображений

<input type="file" name="uploadPicture" accept="image/*" onChange="validateAndUpload(this);"/> 

Во-вторых, вы можете создать объект изображения, чтобы увидеть, если это истинный образ

function validateAndUpload(input){ 
    var URL = window.URL || window.webkitURL; 
    var file = input.files[0]; 

    if (file) { 
     var image = new Image(); 

     image.onload = function() { 
      if (this.width) { 
       console.log('Image has width, I think it is real image'); 
       //TODO: upload to backend 
      } 
     }; 

     image.src = URL.createObjectURL(file); 
    } 
};​ 

Answer 2

Спасибо Arūnas Smaliukas. Ваш ответ приблизил меня к тому, что я хотел.

Image.onload будет вызываться только в том случае, если файл является допустимым. Таким образом, нет необходимости проверять this.width в обратном вызове onload().

Чтобы обнаружить, что это недопустимое изображение, вы можете использовать Image.onerror.

$().ready(function() { 
 
    $('[type="file"]').change(function() { 
 
    var fileInput = $(this); 
 
    if (fileInput.length && fileInput[0].files && fileInput[0].files.length) { 
 
     var url = window.URL || window.webkitURL; 
 
     var image = new Image(); 
 
     image.onload = function() { 
 
     alert('Valid Image'); 
 
     }; 
 
     image.onerror = function() { 
 
     alert('Invalid image'); 
 
     }; 
 
     image.src = url.createObjectURL(fileInput[0].files[0]); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" />