Use trigger method to realize pop-up file selection dialog box without clicking file type input
|
You can use the trigger method. There is no native trigger function in JavaScript. You can write one yourself or use jQuery's implementation directly: Copy code The code is as follows:var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); button1.onclick = function(){alert("button1");trigger(button2,"onclick");} button2.onclick = function(){alert("button2");} function trigger(ele,event) {ele[event]();} You can also use a simpler way, which is to cover the image, hyperlink or other div to be clicked with the input, and then set the input to be completely transparent, so that when you click the image, you actually click the input, as follows: Copy code The code is as follows:<div class="ps-image" style="width:300px;height:300px;border:0px sold red; background:url('/images/ps.png')"> <input type="file" id="file" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/> </div> |
<<: The difference between Vue interpolation expression and v-text directive
>>: Detailed process of installing nginx1.9.1 on centos8
Recommend
Six inheritance methods in JS and their advantages and disadvantages
Table of contents Preface Prototype chain inherit...
Two-hour introductory Docker tutorial
Table of contents 1.0 Introduction 2.0 Docker Ins...
HTML table markup tutorial (4): border color attribute BORDERCOLOR
To beautify the table, you can set different bord...
Steps to export the fields and related attributes of MySQL tables
Need to export the fields and properties of the t...
Will this SQL writing method really cause the index to fail?
Preface There are often some articles on the Inte...
CSS to achieve the sticky effect of two balls intersecting sample code
This is an effect created purely using CSS. To pu...
New interactive experience of online advertising in website production (graphic tutorial)
As the Internet era becomes more mature, the deve...
Markup Language - List
Standardized design solutions - markup languages ...
4 Practical Tips for Web Page Design
Related articles: 9 practical tips for creating we...
Neon light effects implemented with pure CSS3
This is the effect to be achieved: You can see th...
Install CentOS system based on WindowsX Hyper-V
At present, most people who use Linux either use ...
Linux uses lsof/extundelete tools to restore accidentally deleted files or directories
Preface Linux does not have a prominent Recycle B...
B2C website user experience detail design reference
Recently, when using Apple.com/Ebay.com/Amazon.co...
Brief Analysis of MySQL B-Tree Index
B-Tree Index Different storage engines may also u...
WeChat applet implements the snake game
This article shares the specific code of the WeCh...