javascript触发input-file的click事件

概述

input:file本身自带的样式不太好看，但是又没法设置样式。
由于系统限制，不能通过代码触发，只允许用户自主点击。
通常的解决办法是，把input:file透明化，实际上点击的还是input:file。

方案

虽然可以通过概述中的办法用css实现，但始终还是占据了位置。

以下的通过javascript实现的触发事件，简单的一行代码即可搞定：D

1 <body>
2   <input type="file" id="demo">
3   <hr>
4
5   <h5 onclick="document.querySelector(‘#demo‘).click()")>虽然我不是按钮，不过你点我的话，是可以触发上传的哦，
6     <br>
7     p.s:即使input:file隐藏了也能。</h5>
8 </body>

时间： 2024-08-26 19:07:12

javascript触发input-file的click事件的相关文章

以input=file方式，获取文件时，在IE下8无法通过某个按钮click事件间接触发input=file的change事件

最近在项目中遇到了许多上传问题,公司内部的组件,通过form上传,需要使用input=file触发选择文件, 因为input=file在各个浏览器中显示的样式是不同的,谷歌,火狐,IE都有所不同,而且不太美观,所以为了解决这一个问题,一开始采用了隐藏input=file 然后通过一个显示的button间接触发input=file的click事件如下 <input type="file" id="upload" style="display:none

给js创建的一个input数组绑定click事件

</pre><pre name="code" class="javascript"><html> <body> <input type="button" name="input[]" value="按钮1" /><br /> <input type="button" name="input[]&quo

如何用按钮的click事件去触发a标签的click事件

在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a" href="http://www.XXXX.html"></a> $("#my_input").click(function () { //do something }); 或 $("#my_a").click(functi

Firefox下代码触发a标签的click事件无效

通过一次导出功能是让自己如何一步一步掉坑最后又是怎么爬起来的在页面中通过document.createElement('a');创建一个a标签,然后给a标签的href属性赋url,通过代码触发a标签的click事件请求后台,在Chrome浏览器中请求正常,但是在Firefox中始终无效,debugger发现代码也走到了a.click()方法,但是就是没反应.代码如下: $.ajax({ url: Config.ApiUrl + "TZTZ/DowloadFile", type: &q

移动端触发touchend后阻止click事件

// vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prevent="doSomething"> 参考链接 https://blog.csdn.net/heeng4688/article/details/83305079 原文地址:https://www.cnblogs.com/lvonve/p/11322891.html

input file 添加图片预览绑定onchange执行函数重复添加不执行onchange函数

问题描述: input file上传图片绑定了onchange执行函数,是在选择的图片发生变化时才会触发onchange的函数.当我们添加图片并预览时,遇到添加同一张图片或者,添加后删除再添加同一张图片时,不会触发onchange事件. 解决方法: 1.在执行的onchange里的函数最后重新生成一段input file html代码替换掉原来的input file $('#cFile').replaceWith('<input type="file" id="cFi

about-ie下模拟input file上传功能失效

Q:IE9下file提交到iframe中,load一直不触发,其他高级浏览器均无此问题解决方案:不使用js模拟 input click事件,取而代之的是把真实的input设置为要触发元素的大小,进行触发onchange原因分析:低端IE不支持JS模拟 input file的click事件ZXX:隐藏的form IE也也不能获取到submit成功后iframe的onload,坑撒~~~

关于IOS浏览器：document,body的click事件触发规则

今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是讲原理,这里写个简单的代码,大家可以复制到自己页面中去实验: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi

bootstrap 3 中表单元素的写法 ---- 重点是 input file 元素的

我们知道file元素,因为有许多的插件可以使用,往往我们不需要写样式,但是如果要求我们自己写样式(利用bootstrap 3)实现一个file极简样式如何写呢? 下面我们先来看看整个表单的样子! 重点关注头像当点击头像中浏览触发file选择! <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv=&

ASP.NET绑定CHECKBOXLIST--------JQUERY绑定CLICK事件，获取CHECKBOX的VALUE和显示值

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&qu