Laravel,Ajax,Jquery Plugin image upload,preview, convert to thumbnails and display

Question

enter image description here preview uploaded images after upload.and to show the image on the form.Want to achieve this with help of jquery image upload with Laravel framework. help is appreciated.

@Simon I have implemented ur code.its working,but one image is shown in view and i want to show all three images,which are selected.Plz help enter image description here

Answer 1

if you using the standard file input type and say your using a moderish browser etc then you could try the following.

 $('#addImage').on('change', function(evt) { var selectedImage = evt.currentTarget.files[0]; var imageWrapper = document.querySelector('.image-wrapper'); var theImage = document.createElement('img'); imageWrapper.innerHTML = ''; var regex = /^([a-zA-Z0-9\\s_\\\\.\\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; if (regex.test(selectedImage.name.toLowerCase())) { if (typeof(FileReader) != 'undefined') { var reader = new FileReader(); reader.onload = function(e) { theImage.id = 'new-selected-image'; theImage.src = e.target.result; imageWrapper.appendChild(theImage); } // reader.readAsDataURL(selectedImage); } else { //-- Let the user knwo they cannot peform this as browser out of date console.log('browser support issue'); } } else { //-- no image so let the user knwo we need one... $(this).prop('value', null); console.log('please select and image file'); } });

 .wrapper { padding: 25px; } .image-wrapper { padding: 5px; border: 1px #ddd solid; height auto; width: 200px; } .image-wrapper img { max-width: 200px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <input type="file" id="addImage" /> </div> <div class="image-wrapper"> </div>

also viewable on codepen Exmaple