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
Centos7 mysql database installation and configuration tutorial
1. System environment The system version after yu...
Vue+Vant implements the top search bar
This article example shares the specific code of ...
Detailed explanation of the role and working principle of MySQL master-slave replication
1. What is master-slave replication? Master-slave...
Five practical tips for web form design
1. Mobile selection of form text input: In the te...
Detailed explanation of single-row function code of date type in MySQL
Date-type single-row functions in MySQL: CURDATE(...
Summary of CSS gradient effects (linear-gradient and radial-gradient)
Linear-gradient background-image: linear-gradient...
MySQL database query performance optimization strategy
Optimize queries Use the Explain statement to ana...
MYSQL local installation and problem solving
Preface This article is quite detailed and even a...
How to implement Linux disk mounting, partitioning, and capacity expansion operations
Basic Concepts Before operation, you must first u...
A general method for implementing infinite text carousel with native CSS
Text carousels are very common in our daily life....
vue3 custom directive details
Table of contents 1. Registering custom instructi...
How to set the default value of a MySQL field
Table of contents Preface: 1. Default value relat...
Detailed explanation of how to enable HSTS in nginx to force the browser to redirect to HTTPS access
In the previous article, we have implemented loca...
Detailed explanation of how to use zabbix to monitor oracle database
1. Overview Zabbix is a very powerful and most ...
Detailed explanation of common template commands in docker-compose.yml files
Note: When writing the docker-compose.yml file, a...