one button, one input
<button>Upload</button>
<input type="file" multiple>
clicking input will pop up the upload window
but the effect I want: clicking button will pop up the input upload window. How can this be achieved with js?
one button, one input
<button>Upload</button>
<input type="file" multiple>
clicking input will pop up the upload window
but the effect I want: clicking button will pop up the input upload window. How can this be achieved with js?
when input opactity is set to 0, absolutely set to try on button
Custom File input Box (input,type,file) style
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>-(input,type,file)</title>
<style>
.file-wrapper {
position: relative;
width: 225px;
}
.file-label {
display: block;
padding: 14px 20px;
background: -sharp39D2B4;
color: -sharpfff;
font-size: 1em;
text-align: center;
transition: all .4s;
cursor: pointer;
}
.input-file {
position: absolute;
top: 0; left: 0;
width: 225px;
opacity: 0;
padding: 14px 0;
cursor: pointer;
}
.input-file:hover + .file-label,
.input-file:focus + .file-label {
background: -sharp34495E;
color: -sharp39D2B4;
}
form {
padding: 1rem 0 0 1rem;
}
</style>
</head>
<body>
<h2></h2>
<form action="-sharp">
<div class="file-wrapper">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="file-label">...</label>
</div>
</form>
</body>
</html>
https://jsbin.com/cipefamuma/.
this?
or label tag to learn about
$("button").on("click",function () {
$("input").click()
})
button,input is obtained by itself through id or tag, which is roughly written as follows
button.onclick=function(){
input.onclick();
}
if both button
and input [type=file]
are to be displayed, then use input.click ()
to trigger the select file window in the click event of button
;
if you only need to display button
, you can move the input [type=file]
absolute positioning to button
, and set the transparency of input [type=file]
to 0, so that only button
is displayed, while input [type=file]
button
.
execute the click event of input when you click button. If you don't want to display input file, just adjust its transparency.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn"></button>
<input type="file" id="file">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$("-sharpbtn").click(function(){
$("-sharpfile").click();
})
</script>
</body>
</html>
Previous: The problem of parameter shift of $1 in the case of Shell for loop
Next: How to automatically group and statistically sum a column
demand is 1: 15 days after the current time is banned, 2: the date range can only be within 7 days. If the start time is the 2nd, the end time cannot be greater than the 8th, and the rest display mouse display is disabled . have you ever done it, ...
We use wepy to develop Mini Program. The development environment and production environment are different domain names. Cut and return the domain names according to the needs of the environment. does not seem to find the relevant configuration in wepy.c...
The page is shown in the figure the question now is: after I click Delete, how can I tell how much id I deleted? HTML Code: <div id="app" class="container"> <table class="table table-hover"> ...
vscode paste will have an extra line of space after it. How to solve this problem? ...
addPermission:function(){ this.$validator.validateAll().then((result) => { if(result){ var finalPath = this.new_path1 + ":" + this.new_path2; console.log(finalPath); underfine } ...
as shown in the figure, the control navigation of this button shrinks. 1. As soon as the page opens (that is, after logging in), this button doesn t work at all. 2. But after the F5 refresh, this button works. 3. So I tested the code locally ...
A created page can be opened for the first time. However, after the input data is submitted, the second time you open input, you will display the previously entered data and I didn t set the yellow background to run out automatically. The projec...
I have not learned webpack, to learn vue scaffolding as soon as I started. I have done projects independently and packing is normal. Do I answer this question in the interview or not? ...
first of all, the interface looks like this : 1.elementUI 2.: - 3.: - Mayabeque 4.Mayabeque according to the normal logic, I deleted the country, and the corresponding province should be deleted automatically. <el-select v-model="coun...
just started contact with Vue and ElementUI, recently encountered problems in the development process and experienced all kinds of painful debug. Let s get to the point: it seems that you can t transfer files here, so I ll just paste the code: <...
read the official document and was really deceived. ...
< div id= test > asdfgh < span class= cancel-btn > < div > how do you get only asdfgh if you want to get it? You can use either jquery or native js. Thank you, guys. Thank you. ...
if it is a global registration, so that I do not have to introduce each page one by one, isn t it very convenient? Why don t so many people recommend global components? ...
...
the official document is as follows: <checklist title="" :options="commonList" v-model="fruitID">< checklist> {{fruitID}} commonList:[ China , Japan , America ] but the actual project data wi...
Why can t you press the regional prompt only by the city prompt ...
A toash component, the time I set is 1800 milliseconds, and a project has N pages using toash. If one day the product asks me to change it to 3000 milliseconds, then I have to change it one by one. Is there a good solution? <toast v-model=&qu...
is doing a tagging module, as follows: my problem: I can choose the same tag the effect I want: the tag cannot choose the same my first thought is to use v-if to determine whether two arrays have the same data, so that they can show and hide, but...
<input type="file" multiple accept="image png,image gif,image jpeg" @change="getFile($event)"> input getFile:function(e){ this.file = e.target.files; }, creation:function(){ console.log(this.file); ...
as shown in the figure: normal status: : this page uses iscroll to roll down. I don t know if it has any effect. Only in Wechat built-in browser (QQ Browser) will appear this problem, other browsers are normal, ask Daniel, how to deal with compati...