We Keep Coding

Need to upload multiple image on existing grid and also delete the image using jquery

I have six boxes. In this box already have dummy image.I need to upload image and that placed to the top box one by one and need to delete also.
When we upload image using upload button, that placed on above div one by one. Currently when i try to add image that placed to all the six divs.
<div class="image-wrapper" style="display:flex;">
<div class="image-wrap">
<img id="img_0" src="assets/images/img1.jpg" class="img-fluid">
</div>
<div class="image-wrap">
<img id="img_1" src="assets/images/unloaded-img.png" class="img-fluid">
</div>
<div class="image-wrap">
<img id="img_2" src="assets/images/unloaded-img.png" class="img-fluid">
</div>
<div class="image-wrap">
<img id="img_3" src="assets/images/unloaded-img.png" class="img-fluid">
</div>
<div class="image-wrap">
<img id="img_4" src="assets/images/unloaded-img.png" class="img-fluid">
</div>
<div class="image-wrap">
<img id="img_5" src="assets/images/unloaded-img.png" class="img-fluid">
</div>
</div>
<div class="upload-btn">
<div class="upload-btn-wrapper">
<button class="btn">Upload a file1</button>
<input type="file" id="files" name="files[]" multiple="">
</div>
</div>
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<div><span class=\"pip image-wrap\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\">X</span>" +
"</span></div>").insertAfter(".image-wrap");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});

You are using generic selector (".image-wrap") hence image getting added to all div. You can access divs with index 0... n using eq() method and maintain last index in a variable so that you can calculate next index and add next image to the div.
No need to add remove button click handler each time when file loaded as this will cause issue and you will end with multiple click handler. Better, put it outside using .on() so that dynamically added remove buttons will work.
See below code
$(document).ready(function() {
var imageIndex = 0; // variable to save index
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<div><span class=\"pip image-wrap\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result
+ "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\">X</span>" +
"</span></div>").insertAfter(".image-wrap:eq(" + imageIndex + ")"); // use index
imageIndex++; // increment index by 1
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
// put remove action here for dynamically added image
$(document).on("click",".remove",function(){
$(this).parent(".pip").remove();
});
});

Just because you are using a class selector with insertAfter its adding the image after every div having class .image-wrap instead use below code. Use the last() function to get the last .image-wrap and append it to that element. Below is a sample code.
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
});
} else {
alert("Your browser doesn't support to File API")
}
});
function uploadFile() {
var files = $('#files')[0].files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
var emptyImg = $('img.img-fluid:not(.hasImage)');
emptyImg[0].src = e.target.result;
$(emptyImg[0]).addClass('hasImage');
$(".remove").click(function() {
var img = $(this).parent().find('img.hasImage')[0];
img.src = '';
$(img).removeClass('hasImage');
});
});
fileReader.readAsDataURL(f);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-wrapper" style="display:flex;">
<div class="image-wrap">
<img width="100" id="img_0" src="assets/images/img1.jpg" class="img-fluid">
<span class="remove">X</span>
</div>
<div class="image-wrap">
<img width="100" id="img_1" src="assets/images/unloaded-img.png" class="img-fluid">
<span class="remove">X</span>
</div>
<div class="image-wrap">
<img width="100" id="img_2" src="assets/images/unloaded-img.png" class="img-fluid">
<span class="remove">X</span>
</div>
<div class="image-wrap">
<img width="100" id="img_3" src="assets/images/unloaded-img.png" class="img-fluid">
<span class="remove">X</span>
</div>
<div class="image-wrap">
<img width="100" id="img_4" src="assets/images/unloaded-img.png" class="img-fluid">
<span class="remove">X</span>
</div>
<div class="image-wrap">
<img width="100" id="img_5" src="assets/images/unloaded-img.png" class="img-fluid">
<span class="remove">X</span>
</div>
</div>
<div class="upload-btn">
<div class="upload-btn-wrapper">
<button class="btn" onclick="uploadFile()">Upload a file1</button>
<input type="file" id="files" name="files[]" multiple="">
</div>
</div>
Hope this helps :)

images not displaying through jquery

ok here is the full code
chenging the background image css property through jquery and the images are not displaying .... checked the paths and they are ok
divs exist, css is ok , paths are ok, images exist BUT it works on the on.show function and it does not work on the click function
// when new category show default images
$('#newCategory').on('show.bs.modal', function () {
var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/default.png';
var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/default.png';
$( '#categoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
$( '#bannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
});
// load category info before display dialog
$('body').on('click', '.btn-upd-id',function(){
var id = $(this).attr('upd-id');
$("#update-category-id").val(id);
if( id != "" ){
$.post('category/category_info.php', {id: id}, function(data){
var obj = JSON.parse(data);
$("#upd-name").val(obj[0].name);
var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/' + obj[0].category_image;
var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/' + obj[0].banner_image;
$( '#updCategoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
$( '#updBannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
})
}
});
HTML
<!-- category image -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="category">Category Image</label>
<br/>
<div id="updCategoryPreview"></div>
<input type="file" class="img" id="upd-category" name="upd-category">
</div>
</div>
</div>
<!-- banner image -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="banner">Category Banner</label>
<br>
<div id="updBannerPreview"></div>
<input type="file" class="img" id="upd-banner" name="upd-banner">
</div>
</div>
</div>
I expect it to load the image but it displays nothing.

fed up
used this piece of code and its working
image = new Image();
image.src = url;
image.onload = function () {
$('#image-holder').empty().append(image);
};
found here
Can I get the image and load via ajax into div
thank you all for your help

Append 2 json objects per div

I am trying to append two different JSON items per div. I empty the div before looping through the json and then append the objects.
But I need to append two per div and each item has to be different.
Eg. div1 has img1 & img2, div2 has img3 & img4 etc.
This is the result I am getting -
<div class="gallery-sub-slider">
<div>
<img class="img1">
<img class="img2">
<img class="img3">
<img class="img4">
<img class="img5">
</div>
<div>
<img class="img1">
<img class="img2">
<img class="img3">
<img class="img4">
<img class="img5">
</div>
</div>
But this is the result that I need -
<div class="gallery-sub-slider">
<div>
<img class="img1">
<img class="img2">
</div>
<div>
<img class="img3">
<img class="img4">
</div>
<div>
<img class="img5">
<img class="img6">
</div>
</div>
$.each(data.carImages, function(i){
counter++;
imgLink = data.carImages[i].imgLink;
console.log(counter);
$('.gallery-slider').append('<div><img src="' + imgLink + '" class="gallery-img" data-tag="' + i + '"></div>');
$('.gallery-sub-slider').append('<div class="sub-gallery-item" data-index="' + i + '"></div>');
$('.gallery-sub-slider div').append('<img src="' + imgLink + '" class="sub-gallery-img" data-tag="1"><img src="' + imgLink + '" class="sub-gallery-img">');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Rather than looping through each data.carImage, you can consider first calculating the number of divs you will require:
var divCount = Math.ceil(data.carImages.length / 2)
And loop through those:
for (var i = 0; i < divCount; i++) {
var firstImgIndex = i*2;
var secondImgIndex = firstImgIndex + 1;
var firstImg = data.carImages[firstImgIndex];
var secondImg = data.carImages[secondImgIndex];
// create your div now, with your first and second img, but you might have to check that secondImg !== null or undefined
}

Ajax for slideshow not working

I don't seem to understand exactly how this works. When I call the get ajax method shouldn't the index change and therefore the slide should change or am I not getting something about this.
PHP/HTML
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div class='pic'>
<img src= " . $dir . $pic_array[$index] . " />
</div>
<div class='caption'>
<p id='title'>$titles[$index]</p>
<p id='des'>$descriptions[$index]</p>
</div>
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</html>";
$conn->close();
?>
Javascript
$(function () {
var arrPix = $('#json_pics').val();
var arrPix = $.parseJSON( arrPix );
var index = 0;
var $slider = $('#slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $next = $slides.find('.next');
var $previous = $slides.find('.previous');
var $caption = $slides.find('.caption');
var slide_length = $slide.length;
$slider.hover(function() {
$caption.css('opacity', '1');
$next.css('opacity', '1');
$previous.css('opacity', '1');
}, function() {
$caption.css('opacity', '0');
$next.css('opacity', '0');
$previous.css('opacity', '0');
}
);
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
});
EDIT: Should I be using load instead?

In an endeavor to get you a solution that
Uses AJAX
and uses PHP,
I would suggest something like the following.
'getpic.php'
Summary: (A new file... used to simplify the process of getting a new picture.)
Description: Contains a function that generates the <img> tag and related info for the next image in your gallery.
$dir = /*whatever it is*/;
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/);
$descriptions = /*whatever they are*/;
$titles = /*whatever they're supposed to be*/;
function priWrap($index) {
/*
This handles the actual generating of the <img> tag as well as
the caption and such.
$index refers to a specific picture in $pix_array.
*/
global $pix_array, $dir, $titles, $descriptions;
$arr_len = count($pix_array);
if ($index < 0) {
$index = $arr_len-1;
}
else if { $index >= $arr_len) {
$index = 0;
}
echo "<div class='pic'>
<img src='" . $dir . $pic_array[$index] . "' data-ind='$index' />
</div>
<div class='caption'>
<p id='title'>" . $titles[$index] . "</p>
<p id='des'>" . $descriptions[$index] . "</p>
</div>";
}
#let's get it set up to handle AJAX calls
if (isset($_GET['index'])) {
$index = intval($_GET['index']);
priWrap($index);
}
Changes to 'gallery_.php'
The code you posted should now look like this:
require_once('getpic.php');
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div id='picWrapper'>";
echo priWrap($index) . "
</div><!--End #picWrapper-->
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</body>
</html>";
$conn->close();
?>
Your javascript needs changed, too.
var index = 0;
should be
var index = parseInt($(".pic img").attr("data-ind"));
and
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
should be
$next.click(function() {
index++;
$("#picWrapper").load("getpic.php?index=" + index,
/*Add callback so that index is updated properly.*/
function () {
//update our index
index = parseInt($(".pic img").attr("data-ind"));
//show our caption stuff...
$(".caption").css('opacity', '1');
}
);
});

getting image from link in javascript

I have a link to an image an I would like to save it as an image.
For example the link is http://graph.facebook.com/sarfraz.anees/picture. How do I save this into an image variable in javascript so I can use it to do:
document.write("<img src=\"" + pic + "\" class=\"avatar\">")
also would be very useful if someone can guide me on how to resize this image to a 50x50.
Here's my latest code
UPDATE:
<body id="suggestions" class="default verified ">
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({appId: '1355709392349404', status: true, cookie: true, xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
pic = "http://graph.facebook.com/" + response.session.uid + "/picture";
} else {
window.location = "index.php"
}
});
</script>
<div class="clearfix" id="wrap">
<div id="nav">
<div class="center clearfix">
<h5>
Favor
</h5>
<ul class="icons menu clearfix">
<li>
<a title="You" href="/me">
<script type="text/javascript">
document.write("<img src=\"" + pic + "\" class=\"avatar\">");
</script>
</a>
</li>
Issue is that I can't get the pic that is on the other script

What's wrong with just:
document.write('<img src="http://graph.facebook.com/sarfraz.anees/picture" class="avatar">');
or...
var pic = 'http://graph.facebook.com/sarfraz.anees/picture';
document.write("<img src=\"" + pic + "\" class=\"avatar\">")
?? And it's already a 50x50 image...

var pic = document.createElement('img');
pic.className = 'avatar';
pic.src = 'sourcetopicture.png';
pic.height = '50';
pic.width = '50';
document.body.appendChild(pic);
Just substitute where you'd like to append the picture. For instance, if it were a div with the id of myDiv, you could say
document.getElementById('myDiv').appendChild(pic);
Hope this helps a bit!