Вот HTML-код для загрузки изображения. По умолчанию он показывает файлы изображений только в окне просмотра, потому что мы поставили accept="image/*". Но мы все равно можем изменить его из выпадающего списка, и он покажет все файлы. Таким образом, часть Javascript проверяет, является ли выбранный файл фактическим изображением.
<div class="col-sm-8 img-upload-section">
<input name="image3" type="file" accept="image/*" id="menu_images"/>
<img id="menu_image" class="preview_img" />
<input type="submit" value="Submit" />
</div>
Здесь, на событии изменения, мы сначала проверяем размер изображения. И во втором if состоянии мы проверяем, является ли это файлом изображения.
this.files[0].type.indexOf("image") будет -1, если это не файл изображения.
document.getElementById("menu_images").onchange = function () {
var reader = new FileReader();
if(this.files[0].size>528385){
alert("Image Size should not be greater than 500Kb");
$("#menu_image").attr("src","blank");
$("#menu_image").hide();
$('#menu_images').wrap('<form>').closest('form').get(0).reset();
$('#menu_images').unwrap();
return false;
}
if(this.files[0].type.indexOf("image")==-1){
alert("Invalid Type");
$("#menu_image").attr("src","blank");
$("#menu_image").hide();
$('#menu_images').wrap('<form>').closest('form').get(0).reset();
$('#menu_images').unwrap();
return false;
}
reader.onload = function (e) {
// get loaded data and render thumbnail.
document.getElementById("menu_image").src = e.target.result;
$("#menu_image").show();
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
};