Does any one know how to do a simple image upload and display it on the page.
This is what I'm looking for.
- User(me) will choose a image
- The page will display the image without refreshing the page or going to another file.
- multiple
<img src>will do because I need to display different image size.
This was my code. (Some of it are edited I got it from here )
<style> /* Image Designing Propoerties */ .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } </style> <script type="text/javascript"> /* The uploader form */ $(function () { $(":file").change(function () { if (this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function imageIsLoaded(e) { $('#myImg').attr('src', e.target.result); $('#yourImage').attr('src', e.target.result); }; </script> <input type='file' /> </br><img src="#" alt="your image" height=200 width=100> 4 Answers
Here's a simple example with no jQuery. Use URL.createObjectURL, which
creates a DOMString containing a URL representing the object given in the parameter
Then, you can simply set the src of the image to that url:
window.addEventListener('load', function() { document.querySelector('input[type="file"]').addEventListener('change', function() { if (this.files && this.files[0]) { var img = document.querySelector('img'); img.onload = () => { URL.revokeObjectURL(img.src); // no longer needed, free memory } img.src = URL.createObjectURL(this.files[0]); // set src to blob url } }); });<input type='file' /> <br><img src="#">Try this, It supports multi file uploading,
$('#multi_file_upload').change(function(e) { var file_id = e.target.id; var file_name_arr = new Array(); var process_path = site_url + 'public/uploads/'; for (i = 0; i < $("#" + file_id).prop("files").length; i++) { var form_data = new FormData(); var file_data = $("#" + file_id).prop("files")[i]; form_data.append("file_name", file_data); if (check_multifile_logo($("#" + file_id).prop("files")[i]['name'])) { $.ajax({ //url : site_url + "inc/upload_image.php?width=96&height=60&show_small=1", url: site_url + "inc/upload_contact_info.php", cache: false, contentType: false, processData: false, async: false, data: form_data, type: 'post', success: function(data) { // display image } }); } else { $("#" + html_div).html(''); alert('We only accept JPG, JPEG, PNG, GIF and BMP files'); } } }); function check_multifile_logo(file) { var extension = file.substr((file.lastIndexOf('.') + 1)) if (extension === 'jpg' || extension === 'jpeg' || extension === 'gif' || extension === 'png' || extension === 'bmp') { return true; } else { return false; } } Here #multi_file_upload is the ID of image upload field.
5<img height=50px width=50px\ <input type="file" accept="image/*" onchange="preview_image(event)"> <script type"text/javascript"> function preview_image(event) { var reader = new FileReader(); reader.onload = function(){ var output = document.getElementById('output_image'); output.src = reader.result; } reader.readAsDataURL(event.target.files[0]); } </script> <li><h5>Feaured Image</h5></li> <li> <div> <div> <input type="file" name="thumbnail"> <label for="thumbnail">Choose file</label> </div> </div> <div> <img src="@if(isset($product)) {{asset('storage/'.$product->thumbnail)}} @else {{asset('images/no-thumbnail.jpeg')}} @endif" alt=""> </div> </li> <script> $(function(){ $('#thumbnail').on('change', function() { var file = $(this).get(0).files; var reader = new FileReader(); reader.readAsDataURL(file[0]); reader.addEventListener("load", function(e) { var image = e.target.result; $("#imgthumbnail").attr('src', image); }); }); } </script> 
