Display multiple input image - javascript

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 />

Related

the function "reader.onload" is showing error in js

I m trying to upload an image on my html page using the below code.
<img id="blah" class="target" alt="your image"
src="http://placehold.it/180" />
<input type="file" id="file" onchange="readURL(this)" />
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = (function (e) {
console.log(e.target.result);
$('#blah').attr('src', e.target.result);
})();
}
}
I expect the output to b an image in the img tag.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = (function (e) {
document.getElementById("blah").setAttribute('src',reader.result);
});
}
}

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]);
}

combine two different scripts

i found this selectedDraggable in image preview this is exactly what i need for deleting my images and the draggable and resizable works great but their is a small problem the code that i have will allow html2canvas to save the container as an image on my desktop i was wondering if it was possible to combine these two codes? all i need from selectedDraggable in image preview is the delete image, resizable, and draggable to be added to this script
<script>
// External added
jQuery(download).ready(function () {
jQuery(".file-upload-wrapper1").hide();
jQuery(".out-put-img2").hide();
jQuery("#imajes45").change(function () {
var selected = jQuery('#imajes45').val();
if (selected == "new-upload") {
jQuery(".file-upload-wrapper1").show();
} else {
jQuery(".file-upload-wrapper1").hide();
}
});
//File
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
jQuery(".out-put-img2").show();
$('#output2').attr('src', e.target.result);
// / $('.append-img').append('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
jQuery("#upload-img2").change(function () {
readURL(this);
$(".dragbal1").draggable();
$(".out-put-img2").resizable();
});
});
</script>
this is my HTML
<div id="lizard" class="dragbal1">
<img id="output2" class="out-put-img2" style="position: absolute;top: 108px;right: 108px" height="80px" width="80px"></div>

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]);
});
}

Categories

Resources