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);
});
<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