Use trigger method to realize pop-up file selection dialog box without clicking file type input

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

Three principles of efficient navigation design that web designers must know

Designing navigation for a website is like laying...

The 6 Most Effective Ways to Write HTML and CSS

This article shares the 6 most effective methods,...

Implementation of LNMP for separate deployment of Docker containers

1. Environmental Preparation The IP address of ea...

Vue uses Canvas to generate random sized and non-overlapping circles

Table of contents Canvas related documents Effect...

CSS3 simple cutting carousel picture implementation code

Implementation ideas First, create a parent conta...

Sample code for implementing multi-application deployment using tomcat+nginx

Table of contents Multi-application deployment 1-...

HTML+CSS3 code to realize the animation effect of the solar system planets

Make an animation of the eight planets in the sol...

Example of using mycat to implement MySQL database read-write separation

What is MyCAT A completely open source large data...

JavaScript canvas to achieve meteor effects

This article shares the specific code for JavaScr...

Detailed explanation of custom events of Vue components

Table of contents Summarize <template> <...

Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection

In the later stage of exploiting SQL injection vu...

Detailed explanation of the mysql database LIKE operator in python

The LIKE operator is used in the WHERE clause to ...

Use of MySQL DATE_FORMAT function

Suppose Taobao encourages people to shop during D...

Detailed tutorial on using cmake to compile and install mysql under linux

1. Install cmake 1. Unzip the cmake compressed pa...

Detailed explanation of the difference and usage of quotes and backticks in MySQL

Preface So I wrote this blog. This blog also reco...