We Keep Coding

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!

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.

How to change the images based on the range slider?

I am replicating this webpage https://www.modsy.com/project/furniture but the images are not changing based on the range slider
My html code is:
<div class="image mt-3 mb-3">
<img src="../static/images/7.jpg" width="400" height="180">
<img src="../static/images/8.jpg" width="400" height="180">
<img src="../static/images/9.jpg" width="400" height="180">
</div>
<br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="3" class="myslider" id="sliderRange">
<div class="row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p id="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</div>
My JS code:
<script>
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;
rangeslider.oninput = function() {
output.innerHTML = this.value;
}
</script>
My CSS code:
<style>
.rangeslider{
width: 50%;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF ;
width: 50%;
height: 20px;
opacity: 2;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E ;
width: 5%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
</style>
Error is : Uncaught TypeError: Cannot read property 'value' of null
Can you say what mistake I had done in my code

You should use the load event or move your script tag before the end of your body tag.
I'm changing the style attribute but the best approach is to use classes to make the code scale nicely.
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 400px;
margin: 0 auto;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 100px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E;
width: 33%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
.sliderOutput>div {
margin: 5px;
width: 120px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.sliderOutput h6,
.sliderOutput p {
margin: 5px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="https://via.placeholder.com/400x100.png?text=Image1" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image2" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image3" width="400" height="100">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div class="sliderOutput row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p class="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</p>
</div>

Your JS code is running too early. The DOM is not ready.
Moving the script tag towards the end of the page will help (as #RyanSparks mentioned above).

window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < images.children.length; i++) {
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
images.children[i].style.display = 'block';
});
});
.rangeslider {
width: 400px;
margin: 0 auto;
}
.myslider {
-webkit-appearance: none;
background: #FCF3CF;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 100px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #34495E;
width: 33%;
height: 20px;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
.sliderOutput>div {
margin: 5px;
width: 120px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.sliderOutput h6,
.sliderOutput p {
margin: 5px;
}
<div class="image mt-3 mb-3" id="sliderImages">
<img src="https://via.placeholder.com/400x100.png?text=Image1" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image2" width="400" height="100">
<img src="https://via.placeholder.com/400x100.png?text=Image3" width="400" height="100">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div class="sliderOutput row mt-3">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p class="demo"> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div>
</p>
</div>

Change image when radio button checked

I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>

You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.

You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.

You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.

first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}

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>