用js上传前预览图片

Question

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">&times;</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.

Answer 1

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

Answer 2

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>