Multiple image show with jQuery
xxxxxxxxxx
$(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();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
// html file
<div class="col-md-12 mb-3">
<label for="gallery_image" class="form-label">Gallery<span style="color: red;">*</span></label>
<input type="file" class="form-control" name="gallery_image[]" id="gallery-photo-add" rows="3" multiple="">
</div>
<div class="gallery"></div>
xxxxxxxxxx
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
$(document).ready(function()
{
$('form').ajaxForm(function()
{
alert("Uploaded SuccessFully");
});
});
function preview_image()
{
var total_file=document.getElementById("upload_file").files.length;
for(var i=0;i<total_file;i++)
{
$('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'><br>");
}
}
</script>
</head>
<body>
<div id="wrapper">
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upload_file[]" onchange="preview_image();" multiple/>
<input type="submit" name='submit_image' value="Upload Image"/>
</form>
<div id="image_preview"></div>
</div>
</body>
</html>
http://talkerscode.com/webtricks/upload-multiple-images-with-image-preview-using-jquery-ajax-php.php