Friday, 16 September 2016

jQuery uploaded file is an image extensions and file size checking and preview

HTML

<img src="images/avatar.jpg" style="width:50%;" id="image_upload_preview">

<input type="file" id="inputFile" name="profile_photo">

JS

//Live Profile Photo
function imageURL(input) 
{
if (input.files && input.files[0]) 
{
var reader      = new FileReader();
var size      = input.files[0].size;
var type      = input.files[0].type;

if (type=="image/png" || type=="image/jpeg" || type=="image/jpg" ) 
{
if (size < 1048576) 
{
reader.onload = function (e) 
{
$('#image_upload_preview').attr('src', e.target.result);
$("#image_upload_preview").css("height", "200px");
}

else 
{
alert("Maximum 1 MB File size Upload.");
return false;
}
}
else
{
alert('Only JPEG, JPG, PNG File Allowed.');
return false;
}
reader.readAsDataURL(input.files[0]);
}
}
$("#ProfilePhoto").change(function () {
imageURL(this);
});

jQuery uploaded file is an image extensions and file size checking and preview

No comments:

Post a Comment