如何改变 input file的隐藏起来,但还是能点击触发

2024-11-04

Vue触发隐藏input file的方法

1.使用input透明覆盖法将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change事件触发 ----推荐 <p class="uploadImg"> <input type="file" @change="picUpload($event)" accept="image/*" />

改变input type="file" 文字、样式等

<div class="tac"> <input type="file" id="browsefile" class="w0 visibility-hidden" onchange="filepath.value=this.value"> <input class="mt10 bd-none bgc-FFFFFF fw600" type="butt

ie8及其以下版本兼容性问题之input file隐藏上传文件

文件上传时,默认的file标签很难看,而且每个浏览器下都有很大差距.因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它.但是由于IE出于安全方面的考虑上传文件时必须点击file的浏览按钮选择文件才可以把文件上传上去.此时我们可以将file input透明化, 遮罩在自定义的button input 上面.这样用户看到的是我们自定义button的外观而实际上点击的还是file标签. 这样一来我们自定义的按钮存在又能真正点击到file标签,IE下就可以正常上传文件了. 示例: //h

改变文件上传input file类型的外观

当我们使用文件上传功能时,<input type="file">,但是外观有点不符合口味,如何解决这个问题? <input type="file" id="fileInput" style="display:none;"> <input id="img-upload" type="button" onclick="showFileInput()&q

ThinkPHP隐藏index.php出现No input file specified的解决方法

因为在Fastcgi模式下,php不支持rewrite的目标网址的PATH_INFO的解析 ThinkPHP运行在URL_MODEL=2时,会出现 No input file specified.的情况, 这时可以修改网站目录的.htaccess文件: RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 改为 RewriteRule ^(.*)$ index.php?s=$1 [QSA,PT,L] 完整的.htaccess代码为: <IfModule

input file 模拟预览图片。

首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用图库或者摄像头,而安卓系统不能调用= =||.如果有人早知道,轻喷,我才发现... 我对于web这一块很感兴趣,希望能和大家一起交流,一起进步! 代码很简单,当我第一次发博客的纪念... 效果演示: 1.这是页面布局,基本没多少= =class随手起的,不要介意,懒... <body> <p

HTML中上传与读取图片或文件（input file）----在路上（25）

input file相关知识简例在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限制图片的格式.大小等. 在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但特别low.浏览的字样又不能换,但难不倒强迫症患者...看一些其他网站有的将<input type="file" />隐藏,用点击

从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$("#file")[0].value = null; [×]$("#file").attr("value",""); [×]$("#file").attr("value",null); [√]$(&

为什么Jquery对input file控件的onchange事件只生效一次

今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解决方法的: 1.原始方法:把事件写在file控件的onchange=""里面: 2.Jquery方法一: $('#fileId').live('change',function(){ //逻辑添加.... }); 3.Jquery方法二: onchange后,生成一个新input type

自定义input file样式

自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #file { display: none;

如何用一张图片代替 'input:file' 上传本地文件??

今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传本地文件?? 因为默认的 <input type='file'> 上传文件控件样式特别丑,需要换成自定义的图片,如何实现这个功能?? 也就是,将这个玩意: 换成这样的: 当时我还讲了一下label与input之间的绑定关系,问到这个的时候竟然脑袋短路一时没想到label这玩意儿??label作为一

input file样式修改，图片预览删除功能

本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这块儿的可以在自己添加修改. html代码  <div class="picDiv"> <div class="addImages">  <

【apache】No input file specified

默认的 RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]规则在apache fastcgi模式下会导致No input file specified. 修改成 RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]就OK,地址正常重写. 我们都知道,使用伪静态相对来说,对搜索引擎比较友好,启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:“No input file specified.”.

【LNMP】提示Nginx PHP “No input file specified”错误的解决办法

原理: 任何对.php文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在. PHP文件不存在,没办法返回普通的404错误,它返回一个404,并带上一句”No input file specified” 另外,还可能跟路径或者权限有关系,或者SCRIPT_FILENAME 变量没有被正确的设置(这在nginx是最常见的原因). 解决办法: 1 打开文件: usr/local/php/etc/php.ini,修改以下配置把cgi.fix_pathinfo=0

input file 文件上传标签的样式美化

input file 文件上传标签的样式美化将<input type="file">的透明度设置为0: <input type="file" class="filess" style="opacity: 0"/> 然后另外创建一个文本输入框和一个点击按钮: <input type="text" style="width: 350px" class=&quo

thinkphp5开发的网站出现”No input file specified”（php版本5.6.27）

thinkphp5开发的网站出现”No input file specified”(php版本5.6.27) 一.总结一句话总结:搜索引擎一定要用google,比百度节约时间一万倍,google啊,google搜索出来直接有视频,还有其他很多好处 google 1.出现的问题是什么? No input file specified 访问php页面跳出来一句 ”No input file specified” 这句错误提示的意思是不能识别访问的路径 2.出现问题的原因是什么? fast_cgi

JQuery input file 上传图片

表单元素file设置隐藏,通过其他元素打开: .imgfile为input file $(".ul").click(function () {return $(".imgfile").click(); }); JS部分: $(".imgfile").change(function () { var file = $(".imgfile").get(0).files[0]; var reader = new FileReader

input file 美化的方法

css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 113210次浏览由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[type=file] 样式美化,input上传按钮美化. 我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮

巧妙利用label标签实现input file上传文件自定义样式

提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同我们往往需要为其自定义样式,而直接对input添加样式是一件麻烦的事, 因为input本身有默认的样式,我们需要一一覆盖,并且一些样式我们也无法覆盖, 比如你想把选择文件的字体颜色设置为和未选择任何文件的字体颜色一样,就无法实现以前遇到该问题时,我会新建一个div,给它添加相应样式,然后定位覆盖在原

input:file样式怎样修改

问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑解决办法: 给file设置透明度为0,让用户看不见他创建新的button按钮修改button按钮样式点击button的时候使file也被点击具体代码如下:  <img src=""> <input type="file" id="file"> <button>修改图片&

No input file specified.问题的解决

问题描述:apache配置网站出现问题"No input file specified." 解决1: 打开.htaccess 在RewriteRule 后面的index.php教程后面添加一个"?" 如果还是不行,尝试以下方法: 解决2: 以下文件内容清空或者全部注释原文链接:https://jingyan.baidu.com/article/f7ff0bfccce11c2e26bb1381.html(感谢分享) tp5.1 错误 No input file

如何改变 input file的隐藏起来,但还是能点击触发

热门专题