I am building a BlogApp and I am stuck on a Problem.
What i am trying to do:-
I am trying to preview image before upload
. I am using cropping feature to crop the Image but I also want to preview cropped image before Upload too.
template.html
#THIS IS MY CODE
const crop = () => { var $image = $("#image"); var cropData = $image.cropper("getData"); $("#id_x").val(cropData["x"]); $("#id_y").val(cropData["y"]); $("#id_height").val(cropData["height"]); $("#id_width").val(cropData["width"]); } $(function() { /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */ $("#id_file").change(function() { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $("#image").attr("src", e.target.result); $("#modalCrop").modal("show"); } reader.readAsDataURL(this.files[0]); } }); /* SCRIPTS TO HANDLE THE CROPPER BOX */ var $image = $("#image"); var cropBoxData; var canvasData; $("#modalCrop").on("shown.bs.modal", function() { $image.cropper({ viewMode: 1, aspectRatio: 1 / 1, minCropBoxWidth: 200, minCropBoxHeight: 200, ready: function() { $image.cropper("setCanvasData", canvasData); $image.cropper("setCropBoxData", cropBoxData); } }); }).on("hidden.bs.modal", function() { cropBoxData = $image.cropper("getCropBoxData"); canvasData = $image.cropper("getCanvasData"); $image.cropper("destroy"); }); $(".js-zoom-in").click(function() { $image.cropper("zoom", 0.1); }); $(".js-zoom-out").click(function() { $image.cropper("zoom", -0.1); }); /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */ $(".js-crop-and-upload").click(function() { crop() $("#formUpload").submit(); }); $(".js-crop-only").click(function() { crop() $("#modalCrop").modal("hide"); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.1.0/cropper.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.1.0/cropper.css"> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <div class="container"> <:-- FORM TO UPLOAD THE IMAGES --> <form method="post" enctype="multipart/form-data" id="formUpload"> Image; <input type="file" id="id_file" /> <div id="uploadedFile"></div> <input type="hidden" id="id_x" /> <input type="hidden" id="id_y" /> <input type="hidden" id="id_height" /> <input type="hidden" id="id_width" /> <br> <button type="submit" class="button button4">Save Changes</button> </form> </div> <:-- MODAL TO CROP THE IMAGE --> <div class="modal fade" id="modalCrop"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title">Crop the photo</h4> </div> <div class="modal-body"> <img src="" id="image" style="max-width: 100%;"> </div> <div class="modal-footer"> <div class="btn-group pull-left" role="group"> <button type="button" class="btn btn-default js-zoom-in"> <span class="glyphicon glyphicon-zoom-in"></span> </button> <button type="button" class="btn btn-default js-zoom-out"> <span class="glyphicon glyphicon-zoom-out"></span> </button> </div> <button type="button" class="btn btn-default" data-dismiss="modal">Go Back</button> <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button> <button type="button" class="btn btn-primary js-crop-only">Select this image</button> </div> </div> </div> </div>
Model instance name:- file
What have i tried:-
I saw many answers and found many answers but they didn't work for me.
I also tried this:-
document.getElementById("files").onchange = function () { var reader = new FileReader(); reader.onload = function (e) { // get loaded data and render thumbnail. document.getElementById("image").src = e.target.result; }; // read the image file as a data URL. reader.readAsDataURL(this.files[0]); };
<input type="file" id="files" /> <img id="image" />
BUT it didn't worked for me, Because i want to show the cropped image and when i put this code then in my browser it shows two file upload
options which is one for preview
and one for Crop and Upload
. AND i want to show the cropped image
before upload within one file upload option.
I tried many codes but nothing worked for me. I don't what is wrong with it.
Any help would be Appreciated.
You should create Image object first, for example:
function createPreviewImage(file) { imgElm = document.getElementById("ImgDiv") var image = new Image(); image.src = ""; var reader = new FileReader(); reader.onload = (e) => { imgElm = e.target.result; }; reader.readAsDataURL(file); }
URL.createObjectURL
can help you generate a preview
const changehandler=function(e){ let url=URL.createObjectURL( e.target.files[0] ) let div=e.target.parentNode.querySelector('div'); let img=document.createElement('img'); img.src=url; img.className='preview'; div.appendChild( img ) }; document.querySelector('input[type="file"]').addEventListener('change', changehandler );
<form method="post" enctype="multipart/form-data" id="formUpload"> Image: <input type="file" id="id_file" /> <div id="uploadedFile"></div> <input type="hidden" id="id_x" /> <input type="hidden" id="id_y" /> <input type="hidden" id="id_height" /> <input type="hidden" id="id_width" /> <br> <button type="submit" class="button button4">Save Changes</button> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.