uploading multiple images to page

uploading multiple images to page - javascript

I am trying to add a 5 row column with image containing an image, and the capability to click on each and upload a picture. I have one working, however when I try to add the second one image it doesnt work like the first image, I have played around with the script because that is where the issue has to be coming from but I still cant get it to work.
Here is the code below, any tips would be really helpful, thanks in advance
<div class="row">
<div class="column">
<div class="profile-pic-div">
<img src="image.jpg" id="photo">
<input type="file" id="file">
<label for="file" id="uploadBtn">Choose Photo</label>
</div>
</div>
<div class="column">
<div class="profile-pic-div">
<img src="image.jpg" id="photo">
<input type="file" id="file">
<label for="file" id="uploadBtn">Choose Photo</label>
</div>
</div>
<div class="column">
<div class="profile-pic-div">
<img src="image.jpg" id="photo">
<input type="file" id="file">
<label for="file" id="uploadBtn">Choose Photo</label>
</div>
</div>
<div class="column">
<div class="profile-pic-div">
<img src="image.jpg" id="photo">
<input type="file" id="file">
<label for="file" id="uploadBtn">Choose Photo</label>
</div>
</div>
<div class="column">
<div class="profile-pic-div">
<img src="image.jpg" id="photo">
<input type="file" id="file">
<label for="file" id="uploadBtn">Choose Photo</label>
</div>
</div>
</div>
<script src="app.js"></script>
<script>
const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');
const uploadBtn = document.querySelector('#uploadBtn');
imgDiv.addEventListener('mouseenter', function(){
uploadBtn.style.display = "block";
});
imgDiv.addEventListener('mouseleave', function(){
uploadBtn.style.display = "none";
});
file.addEventListener('change', function(){
const choosedFile = this.files[0];
alert(choosedFile);
if (choosedFile) {
const reader = new FileReader();
reader.addEventListener('load', function(){
img.setAttribute('src', reader.result);
});
reader.readAsDataURL(choosedFile);
}
});
</script>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
font-family: sans-serif;
text-align: center;
font-size: 30px;
color: #222;
}
.profile-pic-div{
margin-top: 25px;
margin-right: 10px;
margin-left: 20px;
height: 160px;
width: 160px;
overflow: hidden;
border: 1px solid grey;
}
#photo{
height: 100%;
width: 100%;
}
#file{
display: none;
}
#uploadBtn{
height: 80px;
width: 100%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
background: rgba(0, 0, 0, 0.7);
color: wheat;
line-height: 30px;
font-family: sans-serif;
font-size: 15px;
cursor: pointer;
display: none;
}
Update: I tried creating a new app.js file and changing the id so they are unique. I also added these accordingly to the second row in the html file as well as my style.css. However, now when I click the second image in the row to upload a picture it adds it to the first columns picture.
const imgDiv1 = document.querySelector('.profile-pic-div1');
const img1 = document.querySelector('#photo1');
const file1 = document.querySelector('#file1');
const uploadBtn1 = document.querySelector('#uploadBtn1');
imgDiv1.addEventListener('mouseenter', function(){
uploadBtn1.style.display = "block";
});
imgDiv1.addEventListener('mouseleave', function(){
uploadBtn1.style.display = "none";
});
file1.addEventListener('change', function(){
const choosedFile = this.files[3];
if (choosedFile) {
const reader = new FileReader(); //FileReader is a predefined function of JS
reader.addEventListener('load', function(){
img1.setAttribute('src', reader.result);
});
reader.readAsDataURL(choosedFile);
}
});

You can't select an item if two items has the same ID. The ID is unique, you can use let labels = document.getElementsByTagName("label").
Now to get the label element you can use the index. (labels[0] etc).
With this workaround you can get all the tag you need.
Have a nice day!

Related

How can I show the number of file type depending upon the data in php?

I am displaying the dynamic input file type field. There is no issue with creating dynamic file type and inserting the data into the database.
I have inserted the data like a.png,b.png,c.png,d.png and I can fetch the data from the database.
Now my issue is, I am on edit page and how can I show the number of file type depending upon the data? I mean if the user uploaded 2 images then show 2 file type if 3 then show 3 file type.
I know I can do this using explode method but The User is on edit page so he/she can add the more file type.
Below code is the UI code.
$(function() {
const max_fields = 5;
const $wrapper = $(".input_fields_wrap .row");
const $add_button = $(".add_field_button");
const template = '<div class="col-lg-4 mb-3"><div class="customfileWrap"><div class=" upload_file"><input type="file" name="slider[]" class="fileupload"><span class="excel_upload_icon"></span><p id="file-name"></p><span class="upload_text"> Click here to upload file </span><div class="gallery"></div></div> <i class="fas fa-times"></i> </div></div>';
let fileUploadCount = 1;
$add_button.click(e => {
e.preventDefault();
if (fileUploadCount < max_fields) {
fileUploadCount++;
$wrapper.append(template);
}
});
$wrapper.on('click', '.remove_field', function(e) {
e.preventDefault();
//$(this).closest('.customfileWrap').remove();
$(this).parent('div').parent('div').remove();
fileUploadCount--;
})
$wrapper.on('change', '.fileupload', function() {
imagesPreview(this);
});
// Multiple images preview in browser
const imagesPreview = function(input) {
const placeToInsertImagePreview = $(input).parent().find('div.gallery');
if (input.files) {
var filesAmount = input.files.length;
for (let i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
});
.upload_file {
border: 3px dashed #042954;
position: relative;
text-align: center;
padding: 20px;
border-radius: 3px;
background: #f9f9f9;
height: 120px;
}
.upload_file input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
outline: none;
opacity: 0;
cursor: pointer;
}
.remove_field {
position: absolute;
top: -10px;
right: -10px;
color: #fff;
background-color: red;
width: 22px;
height: 22px;
text-align: center;
border-radius: 20px;
}
.upload_file img {
width: 100px;
}
.customfileWrap {
position: relative;
}
.remove_field {
position: absolute;
top: -10px;
right: -10px;
color: #fff;
background-color: red;
width: 22px;
height: 22px;
text-align: center;
border-radius: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<section>
<div class="container">
<div class="innerWrpperpadding bg-white">
<div class="input_fields_wrap">
<button class="add_field_button mb-3">Add More Images</button>
<div class="row">
<div class="col-lg-4 mb-3">
<div class="customfileWrap">
<div class=" upload_file">
<input type="file" name="slider[]" id="fileupload1" class="fileupload">
<span class="excel_upload_icon"></span>
<p id="file-name"></p>
<span class="upload_text"> Click here to upload file </span>
<div class="gallery"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I tried this logic and I am getting my output with little bit issue. The user can add only 5 file type but here i can add 5 file type along with number of explode data.
<section>
<div class="container">
<div class="innerWrpperpadding bg-white">
<div class="input_fields_wrap">
<button class="add_field_button mb-3">Add More Images</button>
<div class="row">
<?php $sliders=explode(",", $companyInfo['slider']);
foreach ($sliders as $key => $h) {?>
<div class="col-lg-4 mb-3">
<div class="customfileWrap">
<div class=" upload_file">
<input type="file" name="slider[]" id="fileupload1" class="fileupload">
<span class="excel_upload_icon"></span>
<p id="file-name"></p>
<span class="upload_text"> Click here to upload file </span>
<div class="gallery"></div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</section>

How to upload file images with button click

I am trying to create a small application that will allow me to create a tab image gallery. I have been able to successfully upload the image in the code below, but once the my image files are selected, they immediately show up in the allocated thumbnails. I still want the images to show up in the thumbnails, but only when a click even has occured. How do I create a function that will grab the files and then allocate them to the proper thumbnails with a button click? Any help would be appreciated. I am hoping to not use any php, I'm trying to keep a front end developer perspective on this. Thank you!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery App</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="fieldset">
<legend>Your Images</legend>
<div>
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar1" name="avatar1" data-thumb='thumbnail-one' required="">
<button type="submit" id="delete_btn_1">Delete</button>
</div>
<div>
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar2" name="avatar2" data-thumb='thumbnail-two' required="">
<button type="submit" class="delete_btn">Delete</button>
</div>
<div>
<label for="avatar">Upload Your Image:</label>
<input type="file" id="avatar3" name="avatar3" data-thumb='thumbnail-three' required="">
<button type="submit" class="delete_btn">Delete</button>
</div>
<div class="submit-container">
<button type="submit" id="submit_btn">Submit</button>
</div>
</div>
<div class="container">
<div class="col">
<div class="box thumbnail-one">
<img src="https://http.cat/100" alt="Nature" style="width:100%">
</div>
<div class="box thumbnail-two">
<img src="https://http.cat/405" alt="Snow" style="width:100%">
</div>
<div class="box thumbnail-three">
<img src="https://http.cat/504" alt="Mountains" style="width:100%">
</div>
</div>
<div class="col">
<div class="full-image">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img src="https://http.cat/100" id="expandedImg" />
</div>
</div>
</div>
</body>
</html>
jQuery
$(window).on('load', function() {
var files = $("input[type=file]");
files.change(function(e) {
if (this.files && this.files[0]) {
let thumb = $(this).data('thumb');
// let thumb = $(this).attr('data-thumb'); // alternative to above line.
var reader = new FileReader();
reader.onload = function(e) {
$("." + thumb + " img").attr("src", e.target.result);
$('.full-image img').attr("src", e.target.result);
$("#avatar1").html(e.target.result);
}
reader.readAsDataURL(this.files[0]);
console.log(this.files[0]);
}
});
});
$(document).ready(function() {
$('.box').click(function() {
$('.full-image').html($(this).html());
});
$('#delete_btn_1').click(function() {
$('#avatar1').val('');
});
$("#submit_btn").on("click", function() {
$("." + thumb + " img").attr("src", e.target.result);
$('.full-image img').attr("src", e.target.result);
});
});
CSS
body {
font-family: 'Poppins', Verdana, Arial, sans-serif;
}
.fieldset {
background-color: lavender;
border: 10px solid darkblue;
border-radius: 20px;
margin: 20px auto;
width: 720px;
}
legend {
background-color: purple;
border-radius: 10px;
color: white;
padding: 12px;
margin: 5px;
}
.fieldset div {
margin: 10px;
}
label {
display: inline-block;
text-align: right;
vertical-align: top;
width: 200px;
}
.submit-container {
/* width: 100%; */
text-align: right;
}
.container {
width: 60%;
overflow: hidden;
margin: 100px auto;
}
.box {
width: 100px;
height: auto;
padding: 10px;
}
.box {
cursor: pointer;
}
.full-image {
width: 580px;
height: 580px;
padding: 10px;
}
.col {
float: right;
}
.full-image img {
width: 100%;
/* height: 100%; */
}
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}

From my understanding you want the images to load when user clicks submit button, instead of upon file upload.
To do this copy the code from files.change(function(e) {} and paste int into the submit button click event.
For example:
$("#submit_btn").on("click", function () {
var files = $("input[type=file]");
files.each(function (e) {
if (this.files && this.files[0]) {
let thumb = $(this).data('thumb');
var reader = new FileReader();
reader.onload = function (e) {
$("." + thumb + " img").attr("src", e.target.result);
$('.full-image img').attr("src", e.target.result);
$("#avatar1").html(e.target.result);
}
reader.readAsDataURL(this.files[0]);
console.log(this.files[0]);
}
});
});
The code block $(window).on('load', function() { ... }); can then be deleted.

HTML file upload

I'm trying to get file upload working for 3 different div ids (each with their own respective preview), I had come close to it working but the first div replaces the other two divs content.
I'm not sure what I'm doing wrong with the Javascript (not very well versed in js), any help would be extremely appreciated!
function readURL(input, target) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image_target = $(target);
reader.onload = function (e) {
image_target.attr('src', e.target.result).show();
};
reader.readAsDataURL(input.files[0]);
}
}
$("#pic1").live("change",function(){
readURL(this, "#preview1");
});
$("#pic2").live("change",function(){
readURL(this, "#preview2");
});
$("#pic3").live("change",function(){
readURL(this, "#preview3");
});
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.input-file-row-1{
display: inline;
margin-top: 25px;
position: relative;
}
#preview_image {
display: inline;
width: 90px;
height: 90px;
margin: 2px 0px 0px 5px;
border-radius: 10px;
}
.upload-file-container {
position: relative;
width: 100px;
height: 137px;
overflow: hidden;
background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
float: left;
margin-left: 23px;
}
.upload-file-container-text{
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #719d2b;
line-height: 17px;
text-align: center;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 35px;
}
.upload-file-container-text > span{
border-bottom: 1px solid #719d2b;
cursor: pointer;
}
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview1" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic1" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview2" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic2" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview3" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="pic3" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>

the "live" method is deprecated, instead change the code to:
$("#pic1").on("change",function(){
readURL(this, "#preview1");
});
$("#pic2").on("change",function(){
readURL(this, "#preview2");
});
$("#pic3").on("change",function(){
readURL(this, "#preview3");
});

custom input type file, and replace the input type with selected image using jquery

.image-upload > input
{
display: none;
}
.upload-icon{
width: 100px;
height: 97px;
border: 2px solid #5642BE;
border-style: dotted;
border-radius: 18px;
}
.upload-icon img{
width: 60px;
height: 60px;
margin:19px;
cursor: pointer;
}
<form>
<div class="image-upload">
<label for="file-input">
<div class="upload-icon">
<img src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input" type="file"/>
</div>
</form>
I want to upload only image with input type file, when an image will be selected for upload then, upload image icon will replace within the selected image(like bellow screenshot). I did not write any script. what should be the script?

You can try use jQuery for this. I made an example below.
The code to make the preview is this:
function readURL(input) {
var id = $(input).attr("id");
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('label[for="' + id + '"] .upload-icon').css("border", "none");
$('label[for="' + id + '"] .icon').hide();
$('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
}
reader.readAsDataURL(input.files[0]);
}
}
$("input[id^='file-input']").change(function() {
readURL(this);
});
I've made it more dynamic so you can use the input field multiple times, as in your example image.
Hope it helps you.
function readURL(input) {
var id = $(input).attr("id");
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('label[for="' + id + '"] .upload-icon').css("border", "none");
$('label[for="' + id + '"] .icon').hide();
$('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
}
reader.readAsDataURL(input.files[0]);
}
}
$("input[id^='file-input']").change(function() {
readURL(this);
});
.image-upload>input {
display: none;
}
.upload-icon {
width: 100px;
height: 97px;
border: 2px solid #5642BE;
border-style: dotted;
border-radius: 18px;
float: left;
}
.upload-icon .icon {
width: 60px;
height: 60px;
margin: 19px;
cursor: pointer;
}
.prev {
display: none;
width: 95px;
height: 92px;
margin: 2px;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="image-upload">
<label for="file-input">
<div class="upload-icon">
<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
<img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload">
<label for="file-input2">
<div class="upload-icon">
<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
<img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input2" type="file" />
</div>
<div class="image-upload">
<label for="file-input3">
<div class="upload-icon">
<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
<img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input3" type="file" />
</div>
</form>

There is a simplest way for this using one line of code. You can create this using URL.createObjectURL(), check working snippet for this
$('#file-input').change( function(event) {
$("img.icon").attr('src',URL.createObjectURL(event.target.files[0]));
$("img.icon").parents('.upload-icon').addClass('has-img');
});
.image-upload > input
{
display: none;
}
.upload-icon{
width: 100px;
height: 97px;
border: 2px solid #5642BE;
border-style: dotted;
border-radius: 18px;
}
.upload-icon img{
width: 60px;
height: 60px;
margin:19px;
cursor: pointer;
}
.upload-icon.has-img {
width: 100px;
height: 97px;
border: none;
}
.upload-icon.has-img img {
width: 100%;
height: auto;
border-radius: 18px;
margin:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="image-upload">
<label for="file-input">
<div class="upload-icon">
<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input" type="file"/>
</div>
</form>

I think you want to show preview of your selected image.
$("#file-input").change(function () {
readURL(this, 'sampleImageId');
$('.upload-icon').css('border-style','none');
});
function readURL(input, id) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#' + id).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
.image-upload > input
{
display: none;
}
.upload-icon{
width: 100px;
height: 97px;
border: 2px solid #5642BE;
border-style: dotted;
border-radius: 18px;
}
.upload-icon img{
width: 90px;
height: 87px;
margin:5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<div class="image-upload">
<label for="file-input">
<div class="upload-icon">
<img id="sampleImageId" src="https://image.flaticon.com/icons/png/128/61/61112.png">
</div>
</label>
<input id="file-input" type="file"/>
</div>
</form>

Multiple Image Uploader with Preview

I've created an Image Uploader but it's not working properly. I'm not able to understand where am I going wrong.
The JSFIDDLE of my image uploader is given below:
JSFIDDLE
The problem I am facing is when I click on choose files and select more than one files and open it, I wanted it to show the preview of all the images which I selected and it works properly but when I click on delete button it only deletes the preview that means if I submit the files even those files which I have deleted would be uploaded. On another hand I have to click Add more images button to create one more uploader same as above but when I add multiple images it does not show any preview so I cant even select or delete the images which I've selected by mistake. Can anyone find where am I going wrong. I need that add more images button too so that if we forget adding some images or the images are in different directory we can call one more input type files and that should function the same as previous.

So, you were doing some odd things (like using a global variable with an integer assigned to it that I'm assuming you were using to keep track of your objects).
I've cleaned up what you had going on, and removed some redundant functions. Essentially, you needed to better utilize the JavaScript FileReader() function. You'll need to take a closer look at your buttons; as I didn't fix them for you. ;)
What you needed to do was iterate through your this.files array, and display the results using the FileReader() function. Code below.
$('#add_more').click(function() {
"use strict";
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append(
$("<input/>", {
name: 'file[]',
type: 'file',
id: 'file',
multiple: 'multiple',
accept: 'image/*'
})
));
});
$('#upload').click(function(e) {
"use strict";
e.preventDefault();
if (window.filesToUpload.length === 0 || typeof window.filesToUpload === "undefined") {
alert("No files are selected.");
return false;
}
// Now, upload the files below...
// https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously
});
function deletePreview(ele, i) {
"use strict";
try {
$(ele).parent().remove();
window.filesToUpload.splice(i, 1);
} catch (e) {
console.log(e.message);
}
}
$("#file").on('change', function() {
"use strict";
// create an empty array for the files to reside.
window.filesToUpload = [];
if (this.files.length >= 1) {
$("[id^=previewImg]").remove();
$.each(this.files, function(i, img) {
var reader = new FileReader(),
newElement = $("<div id='previewImg" + i + "' class='abcd'><img /></div>"),
deleteBtn = $("<span class='delete' onClick='deletePreview(this, " + i + ")'>delete</span>").prependTo(newElement),
preview = newElement.find("img");
reader.onloadend = function() {
preview.attr("src", reader.result);
preview.attr("alt", img.name);
};
try {
window.filesToUpload.push(document.getElementById("file").files[i]);
} catch (e) {
console.log(e.message);
}
if (img) {
reader.readAsDataURL(img);
} else {
preview.src = "";
}
newElement.appendTo("#filediv");
});
}
});
#formdiv {
text-align: center;
}
#file {
color: green;
padding: 5px;
border: 1px dashed #123456;
background-color: #f9ffe5;
}
#img {
width: 17px;
border: none;
height: 17px;
margin-left: -20px;
margin-bottom: 191px;
}
.upload {
width: 100%;
height: 30px;
}
.abcd {
text-align: center;
position: relative;
}
.abcd img {
height: 200px;
width: 200px;
padding: 5px;
border: 1px solid rgb(232, 222, 189);
}
.delete {
color: red;
font-weight: bold;
position: absolute;
top: 0;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formdiv">
<div id="filediv">
<input type="file" id="file" name="files[]" multiple="multiple" accept="image/*" title="Select Images To Be Uploaded">
<br>
</div>
<input type="button" id="add_more" class="upload" value="Add More Images" />
<input type="submit" name="submit" value="Add Product" class="upload" id="upload" title="Add Product To The Inventory">
</div>

This is my first time contributing to StackOverflow. I hope this helps someone. I am fairly new to web development. I would, however, be grateful if someone can turn the javascript code into a loop. The code below can easily upload multiple images to the server using their unique name="name";
function showPreviewOne(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-1-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionOne() {
document.getElementById("file-ip-1-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************** */
function showPreviewTwo(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-2-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionTwo() {
document.getElementById("file-ip-2-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewThree(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-3-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionThree() {
document.getElementById("file-ip-3-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewFour(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-4-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionFour() {
document.getElementById("file-ip-4-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************** */
function showPreviewFive(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-5-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionFive() {
document.getElementById("file-ip-5-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewSix(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-6-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionSix() {
document.getElementById("file-ip-6-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
body {
margin:0px;
padding:0px;
background:#f1f1f1;
}
.image-upload-one{
grid-area: img-u-one;
display: flex;
justify-content: center;
}
.image-upload-two{
grid-area: img-u-two;
display: flex;
justify-content: center;
}
.image-upload-three{
grid-area: img-u-three;
display: flex;
justify-content: center;
}
.image-upload-four{
grid-area: img-u-four;
display: flex;
justify-content: center;
}
.image-upload-five{
grid-area: img-u-five;
display: flex;
justify-content: center;
}
.image-upload-six{
grid-area: img-u-six;
display: flex;
justify-content: center;
}
.image-upload-container{
display: grid;
grid-template-areas: 'img-u-one img-u-two img-u-three img-u-four img-u-five img-u-six';
}
.center {
display:inline;
margin: 3px;
}
.form-input {
width:100px;
padding:3px;
background:#fff;
border:2px dashed dodgerblue;
}
.form-input input {
display:none;
}
.form-input label {
display:block;
width:100px;
height: auto;
max-height: 100px;
background:#333;
border-radius:10px;
cursor:pointer;
}
.form-input img {
width:100px;
height: 100px;
margin: 2px;
opacity: .4;
}
.imgRemove{
position: relative;
bottom: 114px;
left: 68%;
background-color: transparent;
border: none;
font-size: 30px;
outline: none;
}
.imgRemove::after{
content: ' \21BA';
color: #fff;
font-weight: 900;
border-radius: 8px;
cursor: pointer;
}
.small{
color: firebrick;
font-size:15px;
}
#media only screen and (max-width: 700px){
.image-upload-container{
grid-template-areas: 'img-u-one img-u-two img-u-three'
'img-u-four img-u-five img-u-six';
}
}
<div class="image-upload-container">
<div class="image-upload-one">
<div class="center">
<div class="form-input">
<label for="file-ip-1">
<img id="file-ip-1-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionOne()"></button>
</label>
<input type="file" name="img_one" id="file-ip-1" accept="image/*" onchange="showPreviewOne(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-two">
<div class="center">
<div class="form-input">
<label for="file-ip-2">
<img id="file-ip-2-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionTwo()"></button>
</label>
<input type="file" name="img_two" id="file-ip-2" accept="image/*" onchange="showPreviewTwo(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-three">
<div class="center">
<div class="form-input">
<label for="file-ip-3">
<img id="file-ip-3-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionThree()"></button>
</label>
<input type="file" name="img_three" id="file-ip-3" accept="image/*" onchange="showPreviewThree(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- *********************************************************************************************************** -->
<div class="image-upload-four">
<div class="center">
<div class="form-input">
<label for="file-ip-4">
<img id="file-ip-4-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionFour()"></button>
</label>
<input type="file" name="img_four" id="file-ip-4" accept="image/*" onchange="showPreviewFour(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-five">
<div class="center">
<div class="form-input">
<label for="file-ip-5">
<img id="file-ip-5-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionFive()"></button>
</label>
<input type="file" name="img_five" id="file-ip-5" accept="image/*" onchange="showPreviewFive(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-six">
<div class="center">
<div class="form-input">
<label for="file-ip-6">
<img id="file-ip-6-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionSix()"></button>
</label>
<input type="file" name="img_six" id="file-ip-6" accept="image/*" onchange="showPreviewSix(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************** -->
</div>

We Keep Coding

JavaScript is the programming language of the Web.

uploading multiple images to page - javascript

You can't select an item if two items has the same ID. The ID is unique, you can use let labels = document.getElementsByTagName("label"). Now to get the label element you can use the index. (labels[0] etc). With this workaround you can get all the tag you need. Have a nice day!

Related

How can I show the number of file type depending upon the data in php?

How to upload file images with button click

HTML file upload

custom input type file, and replace the input type with selected image using jquery

Multiple Image Uploader with Preview

Categories

Resources