正文
谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在项目过程中遇到的需要上传本地文件，file的原始控件不太美观，但是这个控件和button有点不太一样，
改变这个样式的思路就是在控件外面套一层链接，然后把file控件的透明度设置为0(透明)。样式只需要对外面那层进行操作就行。
html代码：
<td style="text-align: left;">
<a href="javascript:;" class="file">选择文件
<input type="file" name="fi" id="f">
</a>
</td>
css代码：
.file {
position: relative;
display: inline-block;
background: rgb(125, 146, 174);
border: 0px solid rgb(125, 146, 174);
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #fff;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
效果图：
由于点击选择文件change事件只响应一次，就是说相同的文件名称的文件或者同一个文件在修改以后不刷新页面就点击提交时时不会再次响应的。
如果这里使用的是click事件，需要点击提交以后再点击选择文件才会生效。这里我查了很多方法，在谷歌游览器中，file控件的值只能设置为空，不然会报错。
所以这里的思路就是每次点击的时候在file的值设置为空。经过测试，解决了这个问题。
js代码：
function chooseFile(){
$("#f").live('click',function(e){
$("#f").val("");
});//file中是根据空间中的val判断是否change。谷歌游览器中只能把file的val设置为空，设置为其他值会报错，所以这里要增加个click事件
$("#f").live('change',function(e){
var selectedFile = document.getElementById("f").files[0];
var name = selectedFile.name;
$("#filename").val(name);
var reader = new FileReader();
reader.readAsText(selectedFile,"GBK");
reader.onload = function(){
$("#script_content").val(this.result);
$("#script_result").val("");
}
});
}
这是本人使用过程中的一些解决方法，如有错误请轻喷，谢谢！
谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变的更多相关文章- <;input type=";file";>; change事件异常处理办法
问题:最近发现一个奇怪的bug, 那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来 ...
- 解决JS(Vue)input[type=&#39;file&#39;] change事件无法上传相同文件的问题
Html <input id="file" type="file" accept=".map" onchange="uplo ...
- input type=”file“ change事件只执行一次的问题
js解决办法 HTML:<input id="file",type="file" onchange="upload()" /> ...
- 关于input type=file上传图片的总结
最近比较忙,现在来整理一下近期的成果,方便以后再次使用. 关于图片上传的js 和jq jq $("input").change(function () { var $file = ...
- input type=file实现图片上传
<label for="file"> <img src="images/morende.jpg" alt=""> & ...
- INPUT[type=file]的change事件不触发问题
在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...
- How to change the button text of <;input type=“file” />;?
How to change the button text of <input type=“file” />? Simply <label class="btn btn-p ...
- <;input type=";file";>;上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- input type=&#39;file&#39;上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
随机推荐- 报错：HTTP Status 404 - There is no Action mapped for namespace [/] and action name [product-save] associated with context path [/20161101-struts2-2].
运行:index.jsp---->input.jsp----->details.jsp,但是在input.jsp到details.jsp的时候报错误. 异常如下: 严重: Could no ...
- UC打通高德POI数据，用大数据描绘周边热点地图
UC打通高德POI数据,用大数据描绘周边热点地图 2016-10-25 11:13 来源:互联网 我来投稿 我要评论 在北京工作的小李最近很苦恼,房东因小区周边规划了大型商场而坚持涨价. ...
- win7笔记本无线连上无法上网
打开 控制面板----网络与共享中心------更改适配器属性-----找到你的WIFI的那个适配器右键属性----双击internet协议版本4---点上自动获取IP和DNS
- HDU 3695-Computer Virus on Planet Pandora（ac自动机）
题意: 给一个母串和多个模式串,求模式串在母串后翻转后的母串出现次数的的总和. 分析: 模板题 /*#include <cstdio> #include <cstring> # ...
- 【Todo】ipcs命令学习
可以先看这一篇 http://www.jb51.net/article/40805.htm
- 【开源java游戏框架libgdx专题】-03-项目开发与调试
创建libgdx项目 下载项目配置工具 gdx-setup.jar 生成项目 导入Eclipse File -> Import -> Gradle -> Gradle Project ...
- OpenGl学习总结
http://wenku.baidu.com/view/5305fe4f866fb84ae45c8dcd.html
- hdu Crazy Circuits
Crazy Circuits 题目: 给出一个电路板,从+极出发到负极. 如今给你电路板上的最小电流限制,要你在电流平衡的时候求得从正极出发的最小电流. 算法: 非常裸的有源汇最小流.安有源汇最大流做 ...
- Duanxx的Altium Designer学习：PCB试想一下，在目前的水平
1 Shift+S 这个快捷键能高亮当前层,而且使其它层变成灰色.见下图: 2 隐藏指定层 在图中右下角的地方,右键.会弹出一个选项条.选择Hide Layers.能够选择想要隐藏的 ...
- Day2 python基础学习
http://www.pythondoc.com/ Python中文学习大本营 本节内容: 一.字符串操作 二.列表操作 三.元组操作 四.字典操作 五.集合操作 六.字符编码操作 一.字符串操作 1 ...
问题:最近发现一个奇怪的bug, 那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来 ...
Html <input id="file" type="file" accept=".map" onchange="uplo ...
js解决办法 HTML:<input id="file",type="file" onchange="upload()" /> ...
最近比较忙,现在来整理一下近期的成果,方便以后再次使用. 关于图片上传的js 和jq jq $("input").change(function () { var $file = ...
<label for="file"> <img src="images/morende.jpg" alt=""> & ...
在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...
How to change the button text of <input type=“file” />? Simply <label class="btn btn-p ...
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- 报错：HTTP Status 404 - There is no Action mapped for namespace [/] and action name [product-save] associated with context path [/20161101-struts2-2].
运行:index.jsp---->input.jsp----->details.jsp,但是在input.jsp到details.jsp的时候报错误. 异常如下: 严重: Could no ...
- UC打通高德POI数据，用大数据描绘周边热点地图
UC打通高德POI数据,用大数据描绘周边热点地图 2016-10-25 11:13 来源:互联网 我来投稿 我要评论 在北京工作的小李最近很苦恼,房东因小区周边规划了大型商场而坚持涨价. ...
- win7笔记本无线连上无法上网
打开 控制面板----网络与共享中心------更改适配器属性-----找到你的WIFI的那个适配器右键属性----双击internet协议版本4---点上自动获取IP和DNS
- HDU 3695-Computer Virus on Planet Pandora（ac自动机）
题意: 给一个母串和多个模式串,求模式串在母串后翻转后的母串出现次数的的总和. 分析: 模板题 /*#include <cstdio> #include <cstring> # ...
- 【Todo】ipcs命令学习
可以先看这一篇 http://www.jb51.net/article/40805.htm
- 【开源java游戏框架libgdx专题】-03-项目开发与调试
创建libgdx项目 下载项目配置工具 gdx-setup.jar 生成项目 导入Eclipse File -> Import -> Gradle -> Gradle Project ...
- OpenGl学习总结
http://wenku.baidu.com/view/5305fe4f866fb84ae45c8dcd.html
- hdu Crazy Circuits
Crazy Circuits 题目: 给出一个电路板,从+极出发到负极. 如今给你电路板上的最小电流限制,要你在电流平衡的时候求得从正极出发的最小电流. 算法: 非常裸的有源汇最小流.安有源汇最大流做 ...
- Duanxx的Altium Designer学习：PCB试想一下，在目前的水平
1 Shift+S 这个快捷键能高亮当前层,而且使其它层变成灰色.见下图: 2 隐藏指定层 在图中右下角的地方,右键.会弹出一个选项条.选择Hide Layers.能够选择想要隐藏的 ...
- Day2 python基础学习
http://www.pythondoc.com/ Python中文学习大本营 本节内容: 一.字符串操作 二.列表操作 三.元组操作 四.字典操作 五.集合操作 六.字符编码操作 一.字符串操作 1 ...
