Display image before uploading
HTML
|
1 2 3 4 5 6 7 |
<div class="col-md-12 col-sm-12"> <div class="form-group"> <label>Upload Image</label> <input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png,.webp" onchange="validateFileType()"> <div class="gallery"></div> </div> </div> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script> let file = document.getElementById("fileName"); function validateFileType(){ var fileName = file.value, idxDot = fileName.lastIndexOf(".") + 1, extFile = fileName.substr(idxDot, fileName.length).toLowerCase(); if (extFile=="jpg" || extFile=="jpeg" || extFile=="png" || extFile=="webp"){ //TO DO }else{ alert("Only jpg/jpeg and png files are allowed!"); file.value = ""; } } $(function() { // Multiple images preview in browser var imagesPreview = function(input, placeToInsertImagePreview) { if (input.files) { var filesAmount = input.files.length; for (i = 0; i < filesAmount; i++) { var reader = new FileReader(); $(".gallery").empty(); reader.onload = function(event) { $($.parseHTML('<img class="col-md-4 col-sm-4">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview); } reader.readAsDataURL(input.files[i]); } } }; $('#fileName').on('change', function() { imagesPreview(this, 'div.gallery'); }); }); </script> |
Leave a reply