Menu
I am going to preview an image or photo in a form, but it doesn't work and the HTML code looks like this as below:
<form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm"> <p><label for="image">Upload Image:</label> <input type="file" id="imageUpload"/></p> <p><button type="submit" class="button">Save</button></p> <div id="preview"> <img width="160px" height="120px" src="profile pic.jpg" id="thumb" /> </div> </form> and incorporated JS code/script below:
<script type="text/jaavascript"> $(document).ready(function(){ var thumb=$('#thumb'); new AjaxUpload('imageUpload',{ action:$('newHotnessForm').attr('action'), name:'image', onSubmit:function(file,extension){ $('#preview').addClass('loading'); }, onComplete:function(file,response){ thumb.load(function(){ $('#preview').removeClass('loading'); thumb.unbind(); }); thumb.attr('src',response); } }); }); There are 2 main questions on my form:
1. Why doesn't the preview of the image or picture work?
2. How to paste the photo from the form when the save button is clicked, it will go/link to another PHP or PHP page that I created?
925
Right-click on an image file and you should now see an Image Preview command in the popup menu. Click that command to view the image in Windows Photo Viewer (Figure D). Photo Viewer instantly pops up. Click the magnifying glass icon and move the slider to zoom in or out of the image.
First, we have a division element that contains the “img” tag. Using Jquery, we will change the “src” attribute of the “img” tag on upload to preview the image. The second element is the “input” tag. It is essential to specify type = “file” in this context.
Try this: (For Preview)
<script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } </script> <body> <form id="form1" runat="server"> <input type="file" onchange="readURL(this);" /> <img id="blah" src="#" alt="your image" /> </form> </body> Working Demo here>
191
meVeekay's answer was good and am just making it more improvised by doing 2 things.
Check whether browser supports HTML5 FileReader() or not.
Allow only image file to be upload by checking its extension.
HTML :
<div id="wrapper"> <input id="fileUpload" type="file" /> <br /> <div id="image-holder"></div> </div> jQuery :
$("#fileUpload").on('change', function () { var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { var image_holder = $("#image-holder"); image_holder.empty(); var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[0]); } else { alert("This browser does not support FileReader."); } } else { alert("Pls select only images"); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
