I would like to add a multiple file upload button to my application form on my website. Until now I can upload multiple files at once and a list of these files is displayed. However, I would now also like to first upload a few files and see the list and then I'd like to be able add more files and have that list stay. So far, however, the list of the already uploaded files disappears when I do that. This is the HTML, CSS as well as JS code, which I use until now. I would be happy if someone can give me tips on how to change this in the code.
I'm sorry if there are mistakes in my question. It's the first time I'm using stackoverflow and English isn't my first language.
Thanks for the help! :)
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
var children = "";
for (var i = 0; i < input.files.length; ++i) {
children += '<li>'+ input.files.item(i).name + '<span class="remove-list" onclick="return this.parentNode.remove()">X</span>' + '</li>'
}
output.innerHTML = children;
}
.custom-file {
position: relative;
font-family: helvetica;
overflow: hidden;
margin-bottom: 30px;
margin-top: 30px;
width: auto;
display: block;
padding: 10px;
}
.custom-file-input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
z-index: 100;
}
.custom-file img{
vertical-align: middle;
margin-right: 10px;
}
ul.file-list{
font-family: helvetica;
list-style: none;
padding: 0;
}
ul.file-list li{
padding: 5px;
}
.remove-list{
cursor: pointer;
margin-left: 10px;
}
<div class="custom-file">
<input type="file" class="custom-file-input" id="file" multiple onchange="javascript:updateList()" border=">
<label class="custom-file-label" for="file">
<img width="30" src="https://image.flaticon.com/icons/svg/54/54565.svg" /> Dateien auswählen</label>
</div>
<ul id="fileList" class="file-list"></ul>
Don't directly change the HTML of the output, instead just use appendChild() to add the element to the end.
updateList = function() {
var input = document.getElementById('file');
var output = document.getElementById('fileList');
var li = document.createElement("li");
li.innerHTML =
`${input.files[input.files.length - 1].name}
<span
class="remove-list"
onclick="return this.parentNode.remove()"
>X</span>`;
output.appendChild(li);
}
.custom-file {
position: relative;
font-family: helvetica;
overflow: hidden;
margin-bottom: 30px;
margin-top: 30px;
width: auto;
display: block;
padding: 10px;
}
.custom-file-input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
z-index: 100;
}
.custom-file img{
vertical-align: middle;
margin-right: 10px;
}
ul.file-list{
font-family: helvetica;
list-style: none;
padding: 0;
}
ul.file-list li{
padding: 5px;
}
.remove-list{
cursor: pointer;
margin-left: 10px;
}
<div class="custom-file">
<input
type="file"
class="custom-file-input"
id="file"
multiple
onchange="javascript:updateList()"
border=""
/>
<label class="custom-file-label" for="file">
<img
width="30"
src="https://image.flaticon.com/icons/svg/54/54565.svg"
/>
Dateien auswählen
</label>
</div>
<ul id="fileList" class="file-list"></ul>
I want to use the label for trick to create custom file input:
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
}
<section>
<label for="test">
<input type="file" id="test">
<button>Click me</button>
</label>
</section>
But when I click the button inside the label it doesn't not open the file popup, only when I click outside it's working. How can I do this?
<section>
<label for="test">
<input type="file" id="test">
<button onclick="document.querySelector('#test').click()">Click me</button>
</label>
</section>
You can trigger a click Event on your button that simulates a click on the input
Input should be in the front of button element and set the with as the width of button.
See the snippet, I made some change.
input[type="file"] {
opacity: 0;
overflow: hidden;
position: absolute;
width: 61px;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
position: relative;
}
<section>
<label for="test">
<input type="file" id="test">
<button>Click me</button>
</label>
</section>
You can give the label inside the button tag and try it.
Be sure to reset the button padding and give styles to the label tag.
input[type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
}
button {
padding: 0;
}
section {
padding: 30px;
border: 1px solid lightgray;
width: 200px;
margin: 100px;
}
label {
display: block;
padding: 1px 7px 2px;
}
<section>
<input type="file" id="test">
<button><label for="test">Click me</label></button>
</section>
JSFiddle link
This is simple calculator .When i click on button he cant hide textarea
I trying to find problem. When i click he show and hide soo fast idk why..
I really hope someone will find my mistake.Down this is my code i write in html,css,javascript.
function myFunction() {
var x = document.getElementById("myDiv");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function runLB(){
document.case.display.value += "("
}
function runRB(){
document.case.display.value += ")"
}
function run1(){
document.case.display.value += "1"
};
function run2(){
document.case.display.value += "2"
};
function run3(){
document.case.display.value += "3"
};
function run4(){
document.case.display.value += "4"
};
function run5(){
document.case.display.value += "5"
};
function run6(){
document.case.display.value += "6"
};
function run7(){
document.case.display.value += "7"
};
function run8(){
document.case.display.value += "8"
};
function run9(){
document.case.display.value += "9"
};
function run0(){
document.case.display.value += "0"
};
function runPlus(){
document.case.display.value += "+"
};
function runMinus(){
document.case.display.value += "-"
};
function runDivide(){
document.case.display.value += "/"
};
function runMultiply(){
document.case.display.value += "*"
};
function runComma(){
document.case.display.value += "."
};
function runBack(){
var val = document.case.display.value.slice(0, -1);
document.case.display.value = val;
};
function runC(){
document.case.display.value = ""
};
function runEquals() {
if (document.case.display.value == "") {
document.case.display.value = ""
} else {
var equals = eval(document.case.display.value)
document.case.display.value = equals;
}
}
html {
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
not (display) {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 16px;
vertical-align: baseline;
background: transparent;
}
ul {
list-style: none;
}
body {
width: 500px;
}
#a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
z-index: 1;
}
#a:hover
{
animation: animate 5s linear infinite;
}
#keyframes animate
{
0%
{
background-position: 0%;
}
100%
{
background-position: 400%;
}
}
#a:before
{
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
#a:hover:before
{
filter: blur(20px);
opacity:1;
animation: animate 5s linear infinite;
}
{}
form {
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
text-align: center;
padding: 7px;
align-content: center;
border-radius: 10px;
border: 5px solid #006699;
}
#display {
width: 98%;
height: 50px;
text-align: right;
font-size: 3rem;
margin: 7px;
border: 5px solid #006699;
}
.digit {
font-size: 2rem;
background-color: #f8f8f8;
height: 55px;
width: 20%;
border: 3px solid #c6c6c6;
display: inline-block;
box-shadow: 0 1px 1px;
color:#444;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
margin: 2px;
opacity: 0.9;
}
.oper {
font-size: 2rem;
background-color: #d6d6d6;
height: 55px;
width: 20%;
color: #444;
display: inline-block;
margin: 2px;
box-shadow: 0 1px 1px;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
opacity: 0.9;
}
#equal {
background-color:#006699 ;
color: white;
width: 41.5%;
}
textarea {
display: block;
margin-bottom: 20px;
resize: none;
width: 520px;
height: 400px;
max-width: 405px;
max-height: 400px;
margin-left: 36px;
margin-top: 20px;
font-size: 25px;
}
<html>
<head>
<title>Calculator Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<form name="case" >
<input name="display" id="display" value="">
<input type="button" class="oper" value="(" onclick="runLB()">
<input type="button" class="oper" value=")" onclick="runRB()">
<input type="button" id="back" class="oper" value="CE" onclick="runBack()">
<input type="button" id="divide" class="oper" value="÷" onclick="runDivide()" >
<input type="button" class="digit" value="1" onclick="run1()">
<input type="button" class="digit" value="2" onclick="run2()">
<input type="button" class="digit" value="3" onclick="run3()">
<input type="button" id="multiply" class="oper" value="×" onclick="runMultiply()">
<input type="button" class="digit" value="4" onclick="run4()">
<input type="button" class="digit" value="5" onclick="run5()">
<input type="button" class="digit" value="6" onclick="run6()">
<input type="button" id="minus" class="oper" value="-" onclick="runMinus()" >
<input type="button" class="digit" value="7" onclick="run7()">
<input type="button" class="digit" value="8" onclick="run8()">
<input type="button" class="digit" value="9" onclick="run9()">
<input type="button" id="plus" class="oper" value="+" onclick="runPlus()">
<input type="button" class="digit" value="0" onclick="run0()">
<input type="button" id="comma" class="digit" value="." onclick="runComma()">
<input type="button" id="equal" class="oper" value="=" onclick="runEquals()">
<button id="a" onclick="myFunction()"> Note </button>
<div id="myDiv">
<textarea placeholder="Note"></textarea>
</div>
</body>
By default, a HTML button is a 'submit' type (which tries to submit a form).
You should change your button to:
<button type="button" id="a" onclick="myFunction()"> Note </button>
Your button's type is defaulting to a submit button and so it's trying to submit your form and so the entire page contents disappear. Changing the button to type=button solves that.
But, let's back up a bit because you have a whole bunch of other issues here.
Since you're not actually submitting any form data, you don't even need a <form> element. Removing the <form> and </form> also solves the button problem because now there will be no form data to submit.
Next, you've got a whole ton of unnecessary duplicated code. All the functions you have for the button clicks essentially do the same thing, they simply update the display with the value of the button that got clicked. All of that can be done with one simple function that you simply pass a value (the value of the button that got clicked) into.
Then, get rid of all the inline event atributes (onclick). This is how events were configured 25+ years ago and the practice will not die the death it deserves because people just copy/paste that technique from other places. There are a bunch of reasons not to do this. The modern, standards-based way is to separate your JavaScript completely from your HTML (note how much cleaner the HTML is in my answer below).
Next, you are using document.case over and over and, honestly, I have no idea what that is and I'm actually kind of stumped as to why it doesn't throw an error. Instead, get references to the elements that you'll want to work with and interact with them directly.
Also, some of the HTML for the buttons is better written with the <button> element. This will allow you to show one character, but store and pass a different one to the callback functions.
You also have some invalid CSS (the not rule and {}).
I've also change the positioning of the "Note" button as it obscures the calculator, by putting it at the bottom.
Take a look at this solution and the inline comments:
// Get references to special buttons
let display = document.getElementById("display");
let ce = document.getElementById("back");
let note = document.getElementById("note");
let equals = document.getElementById("equal");
// And the textarea
let area = document.querySelector("textarea");
// Get all the operation and numbers buttons into an array
let buttons = Array.prototype.slice.call(document.querySelectorAll(".oper, .digit"));
// Loop over the buttons
buttons.forEach(function(btn){
// Assign a click callback handler
btn.addEventListener("click", function(){
updateDisplay(this.value); // Call the function with the buttons value
});
});
// This function will have the value of whatever button that got
// clicked passed into it and so one function handles all the buttons
function updateDisplay(val){
display.value += val;
}
// Set up the CE button handler
ce.addEventListener("click", function(){
display.value = "";
});
// Set up the note button's event handler
note.addEventListener("click", myFunction);
function myFunction() {
// Just toggle the use of the hidden class instead of
// manually testing for the display state of the element
// and then modifying the inline style as a result
area.classList.toggle("hidden");
}
function runBack(){
var val = display.value.slice(0, -1);
display.value = val;
};
equals.addEventListener("click", function() {
if (display.value !== "") {
display.value = eval(display.value);
}
});
html {
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
ul { list-style: none; }
.hidden { display:none; } /* Just toggle the use of this for hidden/shown */
#note{
position: absolute;
bottom: 0
right: 0;
width: 200px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
z-index: 1;
}
#note:hover { animation: animate 5s linear infinite; }
#keyframes animate {
0% { background-position: 0%; }
100% { background-position: 400%; }
}
#note:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
#note:hover:before
{
filter: blur(20px);
opacity:1;
animation: animate 5s linear infinite;
}
.wrapper {
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
text-align: center;
padding: 7px;
align-content: center;
border-radius: 10px;
border: 5px solid #006699;
}
#display {
width: 98%;
height: 50px;
text-align: right;
font-size: 3rem;
margin: 7px;
border: 5px solid #006699;
}
.digit {
font-size: 2rem;
background-color: #f8f8f8;
height: 55px;
width: 20%;
border: 3px solid #c6c6c6;
display: inline-block;
box-shadow: 0 1px 1px;
color:#444;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
margin: 2px;
opacity: 0.9;
}
.oper {
font-size: 2rem;
background-color: #d6d6d6;
height: 55px;
width: 20%;
color: #444;
display: inline-block;
margin: 2px;
box-shadow: 0 1px 1px;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
opacity: 0.9;
}
#equal {
background-color:#006699 ;
color: white;
width: 41.5%;
}
textarea {
display: block;
margin-bottom: 20px;
resize: none;
width: 520px;
height: 400px;
max-width: 405px;
max-height: 400px;
margin-left: 36px;
margin-top: 20px;
font-size: 25px;
}
<html>
<head>
<title>Calculator Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<input name="display" id="display">
<input type="button" class="oper" value="(">
<input type="button" class="oper" value=")">
<button id="back" class="oper" value="">CE</button>
<input type="button" id="divide" class="oper" value="÷">
<input type="button" class="digit" value="1">
<input type="button" class="digit" value="2">
<input type="button" class="digit" value="3">
<button id="multiply" class="oper" value="*">x</button>
<input type="button" class="digit" value="4">
<input type="button" class="digit" value="5">
<input type="button" class="digit" value="6">
<input type="button" id="minus" class="oper" value="-">
<input type="button" class="digit" value="7">
<input type="button" class="digit" value="8">
<input type="button" class="digit" value="9">
<input type="button" id="plus" class="oper" value="+">
<input type="button" class="digit" value="0">
<input type="button" id="comma" class="digit" value=".">
<button id="equal" class="oper" value="">=</button>
<div id="myDiv">
<textarea placeholder="Note"></textarea>
</div>
</div>
<button id="note"> Note </button>
</body>
I make a profile page and when the user will upload a picture, I will show a pop-up form-element. If I bring it visible, the opacity of my body-tag, I bring it to 0.5 except the pop-up form and that is my problem. It has also an opacity of 0.5.
document.getElementById('uploadfoto_button').addEventListener('click', function(){
toonUploadFoto();
});
function toonUploadFoto(){
document.getElementsByTagName('body')[0].style.opacity = 0.5;
document.getElementById('uploadfoto').style.visibility = "visible";
document.getElementById('uploadfoto').style.opacity = 1;
}
#uploadfoto {
visibility: hidden;
z-index: 3;
position: fixed;
background-color: white;
padding: 5px;
border-radius: 5px;
width: 600px;
box-shadow: 3px 3px 5px black;
margin: 5% 10%;
}
img.profiel {
width: 200px;
height: 200px;
background-size: cover;
float: left;
position: absolute;
}
span.upload {
position: absolute;
background-color: rgba(0,0,0,0.3);
width: 200px;
height: 50px;
cursor: pointer;
top: 276px;
line-height: 50px;
text-align: center;
z-index: 2;
}
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="Profielfoto" class="profiel"/>
<span class="upload" id="uploadfoto_button">upload image</span>
<form action="" method="POST" enctype="multipart/form-data" id="uploadfoto">
<p>Select image:</p>
<input type="file" name="fileToUpload" id="fileToUpload"/>
<input type="submit" value="Upload image" name="submit"/>
</form>
Can anyone help me? Thanks.
See https://jsfiddle.net/7pLxnrrb/1/
You can use an overlay div that'll cover the page with a high z-index and set poup's zindex to something higher.
CSS:
.overlay
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(255,255,255,0.7);
z-index: 100;
}
HTML:
<div id='overlay' class='overlay' style="display:none;"></div>
<form style='z-index:101;'
JS:
document.getElementById('overlay').style.display = 'block';
Hide the overlay when the form closes.
I am trying to make Javascript do something in this case display an alert when a file is selected by the user in an . I am not sure if I my code actually gets into my javascript or not, Here is my code:
function showNoFile() {
if(document.getElementById("video-file-upload").value != "") {
alert("yeap");
}
}
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>
use it on DOM ready
$("#video-file-upload").change(function(){
if($(this).val() != ""){
alert("some file selected");
}
});
Fiddle
if (document.getElementById("video-file-upload").files.length == 0) {
alert("yeap");
}
Check for files.length is equal to 0.
with javascript:
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>