Aqui está o HTML para o upload de imagens. Por padrão, ele mostra arquivos de imagem apenas na janela de navegação, porque nós colocamos accept="image/*"
. Mas ainda podemos alterá-lo no menu suspenso e ele mostra todos os arquivos. Portanto, a parte Javascript valida se o arquivo selecionado é ou não uma imagem real.
<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>
Aqui no evento de mudança, primeiro verificamos o tamanho da imagem. E na segunda if
condição, verificamos se é ou não um arquivo de imagem.
this.files[0].type.indexOf("image")
será -1
se não for um arquivo de imagem.
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]);
};