Develop Reference

Display multiple input image

i want to display my multiple input image on my html page
this is my input code
<img src="img/package_thumbnail.png" class="myAvatar">
<img id="blah" src="#" alt="" style="display: inline;" /><br><br>
<input type="file" name="newAvatar" id="newAvatar" style="display: none;" onchange="readURL(this);" required />
<script>
$(".myAvatar").click(function() {
$("#newAvatar").trigger("click");
});
</script>
then this is my script to display single image
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
i want to improve it to display multiple image, anyone know how to do it?

When you upload new image just create clone of your dom image element and update src.
Change your function from
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
TO
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$new_img = $('#blah').clone().attr('src', e.target.result).width(150).height(200);
$new_img.insertAfter($('#blah'));
};
reader.readAsDataURL(input.files[0]);
}

Check below snippet. IN this it checks if it as one blank src image then it will update url of that image and if it doesn't contain blank url image means it already contains uploaded image then it will clone that image and update url. And I also updated your html. I just changed id="blah" to class="blah". So when uploading multiple images it doesn't contain duplicate id.
$(".myAvatar").click(function() {
$("#newAvatar").trigger("click");
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
if($("img[src='#']").length == 1)
{
$('.blah')
.attr('src', e.target.result)
.width(150)
.height(200);
}
else
{
$new_img = $('.blah:first').clone().attr('src', e.target.result).width(150).height(200);
$new_img.insertAfter($('.blah:last'));
}
};
reader.readAsDataURL(input.files[0]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img/package_thumbnail.png" class="myAvatar">
<img class="blah" src="#" alt="" style="display: inline;" /><br><br>
<input type="file" name="newAvatar" id="newAvatar" style="display: none;" onchange="readURL(this);" required />

Display Image Preview instead of text [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
We are trying to upload an image to our site.
We click on "Upload Image" button.
Then it displays pop up box.
Then we click on Upload New image button
After that, we will select image from computer & displaying message Image uploaded
Instead of message "Image uploaded", i want to display preview of Uploaded image as like this Jsfiddle
code to display message "Image uploaded"
<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>
js
jQuery(document).ready(function () {
jQuery('body').delegate('.newcustomimage', 'change', function () {
if(jQuery(this).val()) {
jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploaded.</div>');
}
});
});
I did below changes for above code to display "Image Preview" instead of message. Now Image preview is not displaying after we upload image. Instead its displaying like below image before we uploading an image in site.
<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>
<img id="blah" src="http://example.com/media/custom_product_preview/quote" />
Js
jQuery(document).ready(function () {
jQuery('body').delegate('.newcustomimage', 'change', function () {
if (jQuery(this).val()) {
jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploded.</div>');
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}

To do that please follow below
add this in your html
<input type="file" id="add_image_{{rand}}" data-rand={{rand}} class="newcustomimage" name="new_image" onchange="readURL(this);" value="" />
<img id="previewImg" src="#" style="display: none;height: 200px; width: 200px;" >
The java script for the same will be.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
jQuery('#previewImg').attr('src', e.target.result);
jQuery('#previewImg').show();
}
reader.readAsDataURL(input.files[0]);
}
}
This will work in your case please have a try.

This seems to be working fine. Just need to configure the dimensions of the image.
Apply the following css:
.tool-body.selected {
text-align: center;
}
#previewImg {
height: 75px;
display: inline-block;
}
Also correct the spelling of uploaded.
EDIT
The following code works perfectly for the OP and meets his requirement:
jQuery(document).ready(function() {
jQuery('body').on('.newcustomimage', 'change', function() {
if (jQuery(this).val()) {
console.log(jQuery(this).val());
if (jQuery(this).val()) {
var reader = new FileReader();
}
jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploaded.</div>');
}
});
jQuery(".aitcg-button").click(function() {
jQuery('#previewImg').hide();
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
jQuery('#previewImg').attr('src', e.target.result);
jQuery('#previewImg').show();
};
reader.readAsDataURL(input.files[0]);
}
}
The screengrab to the working site can be found here.

You can try like this
HTML
<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>
<div id="imgcontaner"></div>
JS
$(".newcustomimage").change(function() {
var input = this;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#imgcontaner").empty();
$('<img/>').appendTo("#imgcontaner")
.attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
});

You have not called function on file select. You need to change it like this:
jQuery(document).ready(function (){
jQuery('body').delegate('.newcustomimage', 'change', function (){
if (jQuery(this).val())
{
readURL(jQuery(this));
}
});
});
keep there readurl function outside jQuery(document).ready
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
jQuery('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}

two js scripts blocking each other

I have a function that previews an image that is about to be uploaded:
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var if_alternative = true;
$('#preview_image').attr('src', e.target.result);
//hide product_images and fileSelector
}
reader.readAsDataURL(input.files[0]);
}
}
$("#product_images").change(function(){
readURL(this);
});
</script>
Since users are able to upload more than one image, I would like the second image to be previewed as well. This is the function that is supposed to preview the second image:
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader2 = new FileReader();
reader2.onload = function (e) {
var if_alternative2 = true;
$('#preview_image2').attr('src', e.target.result);
}
reader2.readAsDataURL(input.files[0]);
}
}
$("#product_images2").change(function(){
readURL(this);
});
</script>
Now, the problem is that, when both scripts are active, they both preview the image in the second image container (#preview_image2), instead of previewing the first one in the first container, and the second one in the second. Can anybody tell me why? Thanks!

The idea of using a function is to avoid duplicating code, so...
<script>
function readURL(input)
{
var reader;
if (input.files && input.files[0])
{
reader = new FileReader();
reader.onload = function (e)
{
var id = $(input).attr("id"),
new_id = id.substr(0, id.length - 1); // remove 's'
$("#" + new_id).attr('src', e.target.result);
//hide product_images and fileSelector
};
reader.readAsDataURL(input.files[0]);
}
}
$("#product_images, #product_images2").change(function()
{
readURL(this);
});
</script>
Notice that variables are ALL defined at the top of a function. It is safer to define them there so you can see all the variables that you are using and avoid mixing them (not like in C/C++ where braces define a scope.)
Also, a variable defined in a parent function is available as is to the sub-functions. Quite practical.

How to remove image preview when cleared?

I have a program where a selected image is previewed. Here is the code I use.
Javascript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#uploadphoto").change(function(){
readURL(this);
$('#preview').show();
});
But when I remove it with this:
$('#preview').on("click", function () {
$('#uploadphoto').replaceWith( selected_photo = $('#uploadphoto').clone( true ) );
$('#preview').attr('src', '');
});
The photo still is displayed. When I submit the page the photo is not submitted, which I wanted, but how do I get rid of the preview image? $('#preview').attr('src', ''); didn't seem to work...?

You'd use removeProp() for that, as just changing the attribute isn't enough:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result).show();
}
reader.readAsDataURL(input.files[0]);
}
}
$("#uploadphoto").change(function () {
readURL(this);
$('#preview').show();
});
$('#preview').on("click", function () {
$('#uploadphoto').replaceWith(selected_photo = $('#uploadphoto').clone(true));
$('#preview').removeProp('src').hide();
});
FIDDLE
You should also hide and show the image, to make sure the "empty image" icon doesn't show, or you could just remove the element all together and insert a new one each time.
EDIT:
To fade the image out, do:
$('#preview').on("click", function () {
$('#preview').fadeOut(1000, function() {
$(this).removeProp('src');
$('#uploadphoto').replaceWith(selected_photo = $('#uploadphoto').clone(true));
});
});

how to loop this function?

Thanks to some help on here I have a way of previewing images selected for and upload using:
<input type='file' name="files[]" onchange="readURL(this);" multiple />
<div id="previews"></div>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var container = $('#previews');
var image = $('<img>').attr('src', e.target.result).width(150);
image.appendTo(container);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
I was wondering how to loop this function for each file selected on the input? I just don't see where to use something like .each()
edit:
am trying this.. but its wrong somewhere, as it displays 2 previews but both of the same image?
function readURL(input) {
$.each(input.files,function(i) {
var reader = new FileReader();
reader.onload = function (e) {
var container = $('#previews');
var image = $('<img>').attr('src', e.target.result).width(150);
image.appendTo(container);
};
reader.readAsDataURL(input.files[0]);
});
}

input.files is a FileList, which acts like an array.
You can use jQuery.each on it like any other array.

You just need to loop over the last line, where the file is selected.
function readURL(input) {
var reader = new FileReader();
reader.onload = function (e) {
var container = $('#previews');
var image = $('<img>').attr('src', e.target.result).width(150);
image.appendTo(container);
};
$.each(input.files,function(i) {
reader.readAsDataURL(input.files[i]);
});
}