伪触发 input file 的click事件

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量917 收藏 1
点赞数
文章标签： javascript ViewUI

前端在做 input file 美化的时候，通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0

HTML5时代，已有更方便的方法，点击美化按钮直接触发选择文件事件

<span @click="$refs.inputFile.click()">
     选择文件
</span>
<input type="file" ref="inputFile" style="display:none"  multiple />

我这ref 是VUE里的，理解为id吧，不用VUE的话，直接 id=‘inputFile’ 是一样的

这样简单多了

 

weixin_34279579
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
点击图片触发input是file的事件
07-21
window.createObjectURL 上传图片，实现web预览
主动触发 input file 类型的鼠标点击效果
业余前端的职业经历
11-30 2349
其实原始的上传 选中文件 确实有点丑了 所以就需要我 给点装饰 效果 在上面搞一个div 然后 通过点击div 来触发 input的事件 div 我们是可以加上一些样式美化的 然后就是 怎么去实现了 ...
input:file的点击事件高级实现
a932411909的博客
02-23 434
有过尝试的人都知道，对于input:file的样式难看的处理方法，一般都是透明化input，实际点击的还是input:file，使用js操纵？ $("#File").click()？这该是大家都会想到的方法，可是，很不好意思，无法起到作用，经过一番查阅，终于找到js操作呢input:file的方法，很简单 1 function clp(){ 2 return docu...
javascript触发input-file的click事件
dianliaoxiao3638的博客
08-28 2959
概述 input:file本身自带的样式不太好看，但是又没法设置样式。 由于系统限制，不能通过代码触发，只允许用户自主点击。 通常的解决办法是，把input:file透明化，实际上点击的还是input:file。 方案 虽然可以通过概述中的办法用css实现，但始终还是占据了位置。 以下的通过javascript实现的触发事件，简单的一行代码即可搞定：D 1 ...
伪主动触发input:file的click事件
学如逆水行舟，不进则退
04-07 1万+
背景 从前，input:file是不能主动触发click事件的，据说是安全方面的考虑。因此，在美化input:file的时候就麻烦了，最通用的方案是，制作一个经过美化后的，然后把input:file调整好尺寸，覆盖在上方，然后再设置 opacity: 0;，如此一来，用户看到的是，点击的却其实是input:file。 html5允许在click事件的callback中主动出发inp
解决IOS无法触发input:file的click事件
qq_38508172的博客
06-13 4841
当你看到这篇文章的时候，你应该跟我一样也正在为这件事而头疼。 因为，用这种方法完全不能起作用： html <div class="upload"> 上传照片 </div> <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"> js: $('.upload').click(function(){ $('#
html5系列：伪主动触发input:file的click事件
实用至上
12-03 1万+
背景从前，input:file是不能主动触发click事件的，据说是安全方面的考虑。因此，在美化input:file的时候就麻烦了，最通用的方案是，制作一个经过美化后的<button>，然后把input:file调整好尺寸，覆盖在<button>上方，然后再设置 opacity: 0;，如此一来，用户看到的是<button>，点击的却其实是input:file
Vue触发input选取文件点击事件
_NIXIAKF的博客
12-17 2224
<input type="file" style="display:none" ref="img" @change="upImg" /> <el-button @click="choiceImg" size="mini" type="success" icon="el-icon-upload" title="上传">上传</el-button> <script> choiceImg() { this.$refs.img.dispatch.
css：隐藏input file标签并触发点击上传文件事件
彭世瑜的博客
12-22 2403
通过比对发现，方式二是一个不错的选择参考Vue触发隐藏input file的方法实例详解写上传文件时，将html中的(选择文件) 元素隐藏，并通过其它方式点击触发。
解决vue项目中type=”file“ change事件只执行一次的问题
12-29
问题描述 在最近的项目开发中遇到了这样的一个问题，当我上传了一个文件时，我将获取到的文件名清空后，...input type=file style=display:none @change=getFile id=input-file> 上传的文件名：{{fileName}}</p>
JS实现的input选择图片本地预览功能示例
12-29
本文实例讲述了JS实现的input选择图片本地预览功能。...--input 触发 file click事件--> <input type=button value=选择文件 id=mybutton class=mybtn onclick=Id('file').click(); /> <!-
IE中的File域无法清空使用jQuery重设File域
01-19
直接reset form或者是触发type为reset的button的click事件就OK了，但是IE却奇葩了，IE中的File域无法清空，可能你看到的是已经没有值了，但是你可以打印出来看看就知道了： 代码如下: var fileVal = $(‘input[type=...
详解angular2如何手动点击特定元素上的点击事件
12-29
我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能. 有没有内置的方法来...input type=file id=imgFile (click)=onChange($event) >
JS简单实现文件上传实例代码（无需插件）
12-01
代码如下:”up-btn” id=”selectFile”>请...// 点击#selectFile触发input:file的click事件 代码如下:jQuery(‘#selectFile’).live(‘click’,function(){ var ie = !-[1,]; if(ie){ jQuery(‘input:file’).trigg
input的type=file触发的相关事件
热门推荐
现在学习也不晚
07-30 9万+
今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与input相关的事件运行的过程。添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。 我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1058
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 326
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue 3触发input选取文件点击事件操作
08-31
在Vue 3中触发input选取文件点击事件操作的方法如下： 首先，我们需要在Vue的模板中定义一个input标签，并设置它的类型为"file"，同时给它设置一个ref属性，以便在Vue的代码中可以通过ref来获取这个input元素。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值