Issue uploading multiple images to a page with "upload" button... - javascript

I have a Fiddle here...
I've accomplished the ability to get an image to load below the upload button, however, how can I upload multiple images to the same page? There are three places where I've allowed the user to upload a specific image.
<div class="element-file" title="Do you want to add an image to the Accreditation Text?">
<label class="title" style="font-weight: bold;">Add an image to the left of the Accreditation text<br>(Image will be resized to 100px by 100px)</label>
<label class="medium" >
<input type='file' onchange="readURL(this);" />
</label>
<p><strong>(Image will display below)</strong></p>
<div style="max-width: 100px; height: auto; border:1px dashed black;">
<img id="accred_image" src="accred" alt="" />
</div>
</div>
And add an image to this area...
<div class="element-file" title="Do you want to add an image to the Accreditation Text?">
<label class="title" style="font-weight: bold;">Would you like to add a logo image?</label>
<label class="medium" >
<input type='file' onchange="readURL(this);" />
</label>
<p><strong>(Image will display below)</strong></p>
<div style="max-width: 140px; height: auto; border:1px dashed black;">
<img id="blah" src="" alt="" />
</div>
</div>
This is my javascript, but when I upload an image, it places the same image in both spots. I thought this had something to do with the class I am uploading from, but creating the new class, doesn't seem to help at all.
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var reader = new FileReader();
reader.onloadend = function() {
$('#accred_image').attr('src', reader.result);
}
reader.readAsDataURL(file); }
});

You need to find that is the img to update.
Try this:
$("input").change(function(e) {
var elemIMG = $(this).parent().parent().find('img'); // find the img to update
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var reader = new FileReader();
reader.onloadend = function() {
elemIMG.attr('src',reader.result); // update the img src
}
reader.readAsDataURL(file); }
});

Related

How to make a first selected image as a thumbnail image from a list of images in jquery?

Here when the user selects the images it gets append inside the ul tag. This all are working fine(There still might be some problems in the code below since I am very beginner in jquery).
Now what I want to change here is, the image which gets selected at first will have a <li class='thumbnail'> by default then other remaining selected images will not have this thumbnail class in the li tag. But the user later on can change the thumbnail image by clicking the image. How can I do it here ?
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
img = `
<li class="thumbnail">
<div class="image">
<img src="${e.target.result}" width="83" height="100"/>
<div class="close"><div class="ic-close" id="img-remove"></div>
</div>
<p>Thumbnail</p></li>
`
$('#blah').append(img);
if ( $('ul#blah li').length > 5 ) {
$("#blah li:last-child").remove();
alert("You can't upload more than 5 images.");
}
}
reader.readAsDataURL(input.files[0]);
$('ul#blah').on('click','.ic-close',function(e) {
console.log('k');
$(this).closest('li').remove();
});
}
}
$("#imgInp").change(function(){
readURL(this);
});
</script>
html
<div class="col-md-6 form-group">
<label for="">Upload Image</label>
<ul class="list list-inline" id="blah">
<div class="files--upload"><input name='image' class="d-none imgUpload" type="file"
id="imgInp" placeholder=""/><label class="upload-label" for="imgInp">
<div class="ic-add"></div>
<div class="mt-2">Add Photo</div>
</label></div>
</ul>
</div>
One of the simplest ways to download previews is with a fast counter, which will prohibit subsequent downloads to the preview.
I have declared globally a variable:
var prew = true;
Here there is a one-time addition of a image for the preview, and also, the prew is assigned a false, which means the impossibility of further adding a image to this div (#img_prew).
if(prew) {
$('#img_prew').append(img);
$('#img_prew').find('.thumbnail .image p').text('This is a preview');
prew = false;
}
Created div for preview:
<div id="img_prew">...</div>
And at the end I set the width and height through css:
#img_prew img{
width: 300px;
height: 300px;
}
var prew = true;
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
img = `
<li class="thumbnail">
<div class="image">
<img src="${e.target.result}" width="83" height="100"/>
<div class="close"><div class="ic-close" id="img-remove"></div>
</div>
<p>Thumbnail</p></li>
`
if(prew) {
$('#img_prew').append(img);
$('#img_prew').find('.thumbnail .image p').text('This is a preview');
prew = false;
}
$('#blah').append(img);
if ( $('ul#blah li').length > 5 ) {
$("#blah li:last-child").remove();
alert("You can't upload more than 5 images.");
}
}
reader.readAsDataURL(input.files[0]);
$('ul#blah').on('click','.ic-close',function(e) {
console.log('k');
$(this).closest('li').remove();
});
}
}
$("#imgInp").change(function(){
readURL(this);
});
#img_prew img{
width: 300px;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.js"></script>
<div class="col-md-6 form-group">
<label for="">Upload Image</label>
<div id="img_prew"></div>
<ul class="list list-inline" id="blah">
<div class="files--upload"><input name='image' class="d-none imgUpload" type="file"
id="imgInp" placeholder=""/><label class="upload-label" for="imgInp">
<div class="ic-add"></div>
<div class="mt-2">Add Photo</div>
</label></div>
</ul>
</div>

How to add Image Overlay in JS with FileReader?

So far i have managed to get 2 Images on my JS. But i can't get the 1 image above the other. I know it usually works on css with "Z" index but since my images are read by the FileReader I added them into my JS.
Question: What do i have to change to get the image on top of the other one on my Code because im pretty sure its almost finished but i simply cannot find the Error...
My JS:
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<div>')).attr('class', 'position-relative')
.attr('width','200px')
.attr('height','200px')
.css('display','inline-block')
.css('position','relative !important')
.appendTo(placeToInsertImagePreview);
$($.parseHTML('<img>')).attr('src', event.target.result)
.attr('width','200px')
.attr('height','200px')
.css('display','inline-block')
.appendTo(placeToInsertImagePreview);
$($.parseHTML('<div>')).attr('class', 'position-absolute')
.appendTo(placeToInsertImagePreview);
$($.parseHTML('<img>')).attr('src', "/x.png")
.attr('height','80px')
.addClass("")
.css('display','inline-block')
.appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i],);
}
}
My HTML:
<div id="form1">
<input value="" type="file" id="images" name="images[]" accept="image/*" multiple />
<div id="previewHolder" data-item-id-div="" multiple="" class="position-relative">
<div class="position-absolute delete-image">
<img class="image-deletepreview" height=80px style="margin-right: 10px;" src="/x.png" />
</div>
</div>
</div>
So i changed my my JS Code into a 1 liner:
reader.onload = function(event) {
$($.parseHTML('<div>')).attr('class', 'position-relative')
.attr('width','200px')
.attr('height','200px')
.css('display','inline-block')
.css('position','relative !important')
.appendTo(placeToInsertImagePreview);
$($.parseHTML('<img>')).attr('src', event.target.result)
.attr('width','200px')
.attr('height','200px')
.css('display','inline-block')
.appendTo(placeToInsertImagePreview);
$($.parseHTML('<div>')).attr('class', 'position-absolute')
.appendTo(placeToInsertImagePreview);
$($.parseHTML('<img>')).attr('src', "/x.png")
.attr('height','80px')
.addClass("")
.css('display','inline-block')
.appendTo(placeToInsertImagePreview);
}
To this:
reader.onload = function(event) {
$('<div class="position-relative" style="height:200px;width: 200px; display: inline-block; position: relative !important;">' +
'<img alt="" src='+event.target.result+' style="height:200px;width: 100%; display: inline-block;">' +
'<div class="position-absolute" style="top: 0;right: 0;">' +
'<img src="/x.png" class="image-deletepreview" style="height: 20px; display: inline-block;"></div></div>')
.appendTo(placeToInsertImagePreview);
}
I just changed the Div to Position 0 and it worked like a Charm.

JS upload cropper with two instances

I'm trying to upload a second img to the cropper that populates the second .img-result. The cropper should populae whatever was uploaded, and then when the save btn is pressed, the .img-result is updated.
I added the attribute data-up but I'm not sure how to call it in the JS.
// vars
var result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
upload = document.querySelector('.file'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', function(e) {
if (e.target.files.length) {
// start file reader
var reader = new FileReader();
reader.onload = function(e) {
if (e.target.result) {
// create new image
var img = document.createElement('img');
img.id = 'image';
img.src = e.target.result;
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// init cropper
cropper = new Cropper(img);
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', function(e) {
e.preventDefault();
// get result to data uri
var imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
// show image cropped
cropped.src = imgSrc;
});
.img-result {
border: 2px solid;
width: 50px;
height: 50px;
}
.img-result img {
max-height: 100%;
max-width: 100%;
}
.page {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.result {
display: flex;
}
.box {
padding: 0.5em;
width: 100%;
margin: 0.5em;
}
.box-2 {
padding: 0.5em;
width: calc(100%/2 - 1em);
}
.img-w {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="page">
<div class="box">
<div class="options">
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<button class="btn save">Save</button>
</div>
<div class="box">
<input class="file" type="file" id="file-input" data-up="1">
</div>
<div class="box">
<input class="file" type="file" id="file-input" data-up="2">
</div>
<div class="box-2">
<div class="result"></div>
</div>
<div class="result">
<div class="box-2 img-result">
<img class="cropped" src="" alt="" data-up="1">
</div>
<div class="box-2 img-result">
<img class="cropped" src="" alt="" data-up="2">
</div>
</div>
</main>
First of all, as I mentioned in comments. Id must be for each element of your DOM. So, you better change id="file-input" to id="file-input1" and so on.
And It looks like you want to get the attribute value data-up when save function called,
You can do that in this way
save.addEventListener('click', function(e) {
e.preventDefault();
// get result to data uri
document.getElementById('file-input1).getAttribute('data-up')
....

Hyperlink downloads whatever that img src is

Alright i can't really seem to find anything regarding EXACTLY what i'm doing.
Anyways i need to set a hyperlink to download an image. That image has an id already.
Everytime the user displays an image, the download link will download that image they have entered.
When you run the code, enter 255812 for image code.
function myFunction() {
var x = document.getElementById("imagetxt").value;
var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";
// Creating an image
var img = new Image();
// Defining the function if image loads successfully.
img.onload = function() {
document.getElementById("image1").src = y;
};
//Defining the function if image fails to load.
img.onerror = function() {
alert("Image not found");
};
img.src = y;
}
<body align="center">
<div>
<img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
</div>
<div>
<img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
</div>
<div>
<input id="imagetxt" size="6" type="text" value="">
</div>
<div>
<input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
</div>
<div>
<img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
</div>
DOWNLOAD THIS
Get rid of the onclick on the anchor tag
<a href="#" id="imageDL" download>DOWNLOAD THIS</a>
Set the anchor's href in the img.onload
img.onload = function() {
document.getElementById("image1").src = y;
document.getElementById("imageDL").href = y;
};
Add this to the end of myFunction
document.getElementById("imageDL").href = y;
function myFunction() {
var x = document.getElementById("imagetxt").value;
var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";
// Creating an image
var img = new Image();
// Defining the function if image loads successfully.
img.onload = function() {
document.getElementById("image1").src = y;
};
//Defining the function if image fails to load.
img.onerror = function() {
alert("Image not found");
};
img.src = y;
document.getElementById("imageDL").href = y;
}
<body align="center">
<div>
<img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
</div>
<div>
<img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
</div>
<div>
<input id="imagetxt" size="6" type="text" value="">
</div>
<div>
<input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
</div>
<div>
<img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
</div>
DOWNLOAD THIS

File Upload and display file name in table using Javascript?

I'm saying apology to ask this repeated Question.
I've tried so many examples for file Uploading finally I wrote the code below.
Once Hyperlink was clicked it is asking file then we select file.
But i want to display the file name in Table , I'm unable to show on table.
<div class="sf_coursehead">
Upload FileList + Add New
<input type="file" id="upload_input" name="courseAgenda" style="font-size: 50px;
width: 120px; opacity: 0; filter: alpha(opacity :0); position: relative; top: -40px;; left: -20px" />
</div>
<table>
<tr>
<td><td>
</tr>
</table>
But how to show selected files in table,that means each selection table will be add new row
So please help me to display file name in table,
give me suggestion.
Edit:
this is also not working..
$("#upload_input").change(function(){
var filename = document.getElementById('id_transactions').val();
alert(filename);
});
This is my Working Code..
<img src="resources/images/profile_image.png" alt="Profile Image"
width="120" height="150" class="prif_img" />
NewImage
<input type="file" id="upload_input" name="courseAgenda"
style="font-size: 50px; width: 120px; opacity: 0; filter: alpha(opacity : 0); position: relative; top: -40px;; left: -20px" onchange="uploadFile_onChange(this);" />
Script:
function uploadFile_onChange(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.prif_img').attr('src', e.target.result).width(120).height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
this code may what you need,
<script>
$(document).ready(function() {
$("#upload_input").change(function() {
var file_name=$("#upload_input").val();
$("#list_files").append("`<tr><td>`"+file_name+"`</td></tr>`');
}); });
</script>
</head> <body>
<table id="list_files"> </table>

Categories

Resources