This tutorial I want to show you how to preview image on client side before uploading to the server by using javascript FileReader and jquery.
It is simple. Just create a html file with content as below.
<!DOCTYPE html>
<html>
<head>
<title>Client Side Image Preview</title>
</head>
<body style="background: lightgrey">
<center>
<br/><br/><br/>
<img id="preview" src="noimage.jpg" width="350px" height="320px"/><br/>
<input type="file" id="image" style="display: none;"/>
<!--<input type="hidden" style="display: none" value="0" name="remove" id="remove">-->
<a href="javascript:changeProfile()">Change</a> |
<a style="color: red" href="javascript:removeImage()">Remove</a>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function changeProfile() {
$('#image').click();
}
$('#image').change(function () {
var imgPath = this.value;
var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
readURL(this);
else
alert("Please select image file (jpg, jpeg, png).")
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
// $("#remove").val(0);
};
}
}
function removeImage() {
$('#preview').attr('src', 'noimage.jpg');
// $("#remove").val(1);
}
</script>
</body>
</html>
Note: The hidden field is important to use with server side. It is useless for now.
Then just double click on the file to run, you will see the screen as below.
Hope you can do it.
Create ajax CRUD, search, sort and pagination with Laravel 5.5
How to create CRUD, search, sort and pagination with Laravel 5.5