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

Detailed explanation of Vue3 encapsulation Message message prompt instance function

Table of contents Vue3 encapsulation message prom...

Springboot uses vue+echarts front-end and back-end interaction to realize dynamic donut chart

Table of contents Preface 1. Environment Configur...

mysql8.0.11 winx64 installation and configuration tutorial

The installation tutorial of mysql 8.0.11 winx64 ...

Application example tutorial of key in Vue page rendering

introduction During the front-end project develop...

Two ways to create SSH server aliases in Linux

Preface If you frequently access many different r...

A brief talk about cloning JavaScript

Table of contents 1. Shallow cloning 2. Deep clon...

Analysis of the difference between bold <b> and <strong>

All of us webmasters know that when optimizing a ...

Vue elementUI form nested table and verification of each row detailed explanation

Table of contents Effect display Code Link Key Co...

Vue's detailed code for implementing the shuttle box function

Vue - implement the shuttle box function, the eff...

Element's el-tree multiple-select tree (checkbox) parent-child node association is not associated

Attribute check-strictly The official document pr...

How to use Vue cache function

Table of contents Cache function in vue2 Transfor...

Introduction to query commands for MySQL stored procedures

As shown below: select name from mysql.proc where...

Chinese website user experience rankings

<br />User experience is increasingly valued...

Tutorial on installing MySQL8 compressed package version on Win10

1 Download MySQL8 from the official website and i...

Implementation of Docker to build private warehouse (registry and Harbor)

As more and more Docker images are used, there ne...