How to upload file images with button click - javascript

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.

Related

uploading multiple images to page

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!

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>

Multiple image upload and preview

I am learning how to upload multiple images and showing their preview...
I came across the following code
<html>
<head>
<style>
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.input-file-row-1{
display: inline-block;
margin-top: 25px;
position: relative;
}
#preview_image {
display: none;
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('images/picplus.png') top center no-repeat;
float: left;
margin-left: 23px;
}
.upload-file-container-text{
font-family: Arial, 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;
}
</style>
<script>
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]);
}
}
$("patient_pic").live("change",function(){
readURL(this,"#preview_image")
});
</script>
</head>
<body>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview_image" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="patient_pic" label = "add" />
</div>
<span> Add Photo </span>
</div>
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="patient_pic" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
I came across this JS Fiddle which explains it perfectly to me. But being a beginner I know it includes a jQuery library which clearly shows in framework extension of Fiddle. Now my issue is, how should I include it when I start the coding on my machine?
What will be included in the head (<script src="???">) section to make a call to the library?
Below is a working example of a solution to preview multiple uploaded image. (Source, Fiddle)
window.onload = function() {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/>";
output.insertBefore(div, null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
} else {
console.log("Your browser does not support File API");
}
}
body {
font-family: ‘Segoe UI’;
font-size: 12pt;
}
header h1 {
font-size: 12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;
}
article {
width: 80%;
margin: auto;
margin-top: 10px;
}
.thumbnail {
height: 100px;
margin: 10px;
}
<form id='post-form' class='post-form' method='post'>
<label for='files'>Select multiple files: </label>
<input id='files' type='file' multiple/>
<output id='result' />
</form>
First include Jquery library in your <head> section
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
Then below that
<script>
$(function(){
//Here your function
});
</script>
Change in your function use on instead of live
$("patient_pic").on("change",function(){
readURL(this,"#preview_image")
});
jQuery has deprecated live() since 1.7, instead use on()
Its as simple as :-
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//Your Code Goes Here
});
</script>
</head>
<body>
<!--Your H
</body>
</html>

Categories