Add image on when click input - javascript

I want to do:
after clicking plus sign, insert image instead of plus sign
create new plus sign after added image
My codepen demo:
CodePen
function readImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.cert img').attr('src', e.target.result);
$('.cert label').css('opacity', '0');
}
reader.readAsDataURL(input.files[0]);
}
}

This isn't quite perfect, but it works to load multiple images and does clean up the duplicated ID. You can try it in your CodePen JS box:
function readImage(input, element) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$(element).find("img").attr("src", e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$("#certImg0").change(function() {
var element = $(this)
.parent()
.clone();
$(element).find('input').remove();
$(element).find('label').remove();
element.insertAfter($(this).parent());
readImage(this, element);
});
The intent of this is to take the element that is generated and pass the actual element that was created to the readImage function and the new image that is loaded is directly stored in the img element on the new div structure.
(This could be optimized to generate only the div with the img element, and that would make it so that the new images are not clickable. In fact, I modified the code to do that- deleting the input and label from the cloned element.)

Related

How to user-input image to div

I want to add the input file from html as a image inside a div however I don't want to use get element buy class name because I have multiple divs and for each one I want to add special image. if I use any selector the image will be added to each div
any one can help . Thanks
I use this, this will change the image to all div having this class but I want to add a special img to each div
edit: iam creating a new div each time and i want for each div I created to add a special img
here is the full code to create new div and to add pic
mainspan.onclick = () => { // mainspan is button used to create div
let div = document.createElement("div");
div.classList.add("main-dd"); let button =
document.createElement("button"); let img =
document.createElement("img"); img.classList.add("currentimg");
div.appendChild(img); button.classList.add("btnaddinfo");
button.innerHTML = "Add item"; button.addEventListener("click", ()
=> {
addinfo.style.display = "block"; // the menue to add the new picture }); div.appendChild(button);
const uploadPictureButton = document.querySelector(".photo-upload");
uploadPictureButton.addEventListener("change", function () {
displayPicture(this); });
function displayPicture(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document
.querySelector(".currentimg")
.setAttribute("src", e.target.result);
};
reader.readAsDataURL(input.files[0]);
} } }; })
document.querySelector(".photo-upload");
uploadPictureButton.addEventListener("change", function () {
displayPicture(this); }); let a; function displayPicture(input) { if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document
.querySelector(".currentimg")
.setAttribute("src", e.target.result);
};
reader.readAsDataURL(input.files[0]);
} }
You probably want to use URL.createObjectURL
document.querySelector("input").addEventListener("change",event=>{
document.querySelector("img").src = URL.createObjectURL(event.target.files[0]);
})
body {
display: grid;
grid: 1fr 1fr / 1fr;
}
img {
width:4em;
height: 4em;
}
<input type="file" accept="image/png, image/jpeg"/>
<img/>

Passing entire tag in Javascript as a parameter

I have a function in jQuery done like this:
$('#<%=FileUpload1.ClientID%>').change(function () {
var l = document.getElementById('popap');
l.click();
readURL(this);
});
And here is the readURL function:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#before').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
As you can see on the change event I'm passing a this as a parameter to the readURL function and then accessing it's properties inside the readURL function.
My question is, how would I be able to do the same if this event was triggered on the click of a button? Only this time I need to pass into the readURL function what was selected on the file upload element. I've tried something like following:
$('#<%=btnEdit.ClientID%>').click(function (e) {
e.preventDefault();
var l = document.getElementById('popap');
l.click();
readURL(document.getElementById("FileUpload1"));
});
But this doesn't do anything really, the picture isn't shown at all... ?
What am I doing wrong ?
Use ObjectCreateURL, it's faster...
function readURL(input) {
if (input.files && input.files[0]) {
var url = Object.createObjectURL(input.files[0]);
$('#before').attr('src', url);
}
}

Preview an Image in Div before its uploaded using IE9

How can I able to preview a image before it is uploaded. The preview action should be executed in all browsers without using Ajax to upload the image.
Most of the examples are using FileReader, which wont work in IE9.
Is there any plugins or any alternative to make it working in IE9
f (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
Here's the updated code. Hope it works for you.
if (input.files && input.files[0]) {
var url = URL.createObjectURL(input.files[0]);
$('#blah').attr('src', url);
}
JavaScript:
$('#fileID').on('change',function(){ }
var imageName = '';
if (this.files && this.files.length > 0) {
imageName = this.files[0].name;
}
else if (this.value) {
imageName = this.value;
}
if (window.FileReader) {
//as same as other samples
}
else{
var image = document.getElementById('imgItem');
image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='" + imageName + "')";
image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
//code end
I find this works well in emulation-IE9.
Another way to draw a image:
var canvas = document.getElementById('imgArea');
var img = new Image();
img.src = imageName;
img.onload = function () {
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, 200, 200);
}
Note: Add 2017/12/27
One solution to preview a local image with IE-9:
IE-9 does`nt support FileReader, so I tried to upload it first then return the imageName(with server path) to View to change the 'src' attribute of the img.
and it works well.
Points:(the example is using MVC)
1.In the 'change' event of input-type-file, do the ajaxSubmit(the action method:void)
2.In the Controller,using [Newtonsoft.Json.JsonConvert.SerializeObject],to return the json-formatted string.
Response.Write(strData);
3.In the callback of the ajaxSubmit, just change the src of the img.
(dont forget convert the result to json)

How Display Image on page After $on("fileSelected") in angular js

How can I display an image after $on("fileSelected") in AngularJS?
I'm selecting a file using the following:
$scope.$on("fileSelected", function (event, args) {
debugger;
$scope.$apply(function () {
$scope.file = args.file;
});
I need to display the image with the img src attribute.
Try something like this:
var reader = new FileReader();
reader.onload = function (e) {
$('#image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);

Previewing/changing image from input to img tag don't work in safari

just gonna ask something,
my jquery code don't work in safari browser in terms of changing the image source from input type "file". here is my code, please I need this, thanks for answering.
$(window).ready(function(){
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#prev').attr('src', e.target.result);
if($('#prev').width() >= 350){
$('#prev').attr('style', 'width: 100%;');
}else{
$('#prev').attr('style', 'width: auto;');
}
if($('#prev').height() >= 210){
$('#prev').attr('style', 'height: 210px;');
}else{
}
}
reader.readAsDataURL(input.files[0]);
}
};
$("#seeimg").change(function(){
readURL(this);
});
});

Categories