I am uploading multiple images. I am selecting image one by one and displaying image for preview. But it is displaying in vertical format. I am trying to display it in Grid format. Kindly have a look.
var abc=0;
$('#add_more').click(function() {
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append(
$("<input/>", {
name: 'file[]',
type: 'file',
id: 'file'
}),
$("<br/><br/>")
));
});
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('body').on('change', '#file', function() {
if (this.files && this.files[0]) {
abc += 1; //increementing global variable by 1
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd" + abc + "' class='abcd'><img style='height:100px; width:100px;' id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
src = '<?=ASSET_BASE_URL?>scripts/script.js'
$(this).hide();
$("#abcd" + abc).append($("<img/>", {
id: 'img',
src: '/assets/x.png',
alt: 'delete'
}).click(function() {
$(this).parent().parent().remove();
}));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="" method="post">
Please upload your menu.
<hr/>
<div id="filediv" style="width:120px;height=120px;">
<input name="file[]" type="file" id="file" />
</div>
<br/>
<input type="button" id="add_more" class="btn" value="Add More Menu" />
</form>