在项目过程中遇到的需要上传本地文件,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 ...
随机推荐
-
NPM如何更新到最新版
参考文章--npm更新到最新版本的方法 其实我们可以这样,随便新建一个文件夹例如:F:\test.按着"shift"键,右键该文件夹,选择"在此处打开命令窗口(W)&qu ...
-
修改文档框架:word-多级列表与标题样式相结合
转自:http://blog.sina.com.cn/s/blog_6721f25c0100nuf0.html 设置标题的时候希望出现多标题并且自动编号的标题,如下1. XXXXXXXXXXX ...
-
Oracle数据库11g基于rehl6.5的配置与安装
REDHAT6.5安装oracle11.2.4 ORACLE11G R2官档网址: http://docs.oracle.com/cd/E11882_01/install.112/e24326/toc ...
-
HtmlAgilityPack解析全国区号页面到XML
需求:完成一个城市和区号的xml配置文件 处理思路:通过HtmlAgilityPack解析一个区号页面,生产xml文件 页面:http://www.hljboli.gov.cn/html/code.h ...
-
tesseract ocr文字识别
一.环境搭建 (基于VS2010) 1.下载安装 tesseract-ocr-setup-3.02.02.exe 安装包 ,安装时候最好是在FQ的情况下安装.(安装一点要勾选 Tesseract de ...
-
Struts2之i18N国际化
对于i18n其实没有太多内容,一般的公司用不到这些内容,除非是跨国公司,但即便是跨国公司也不一定会使用i18n来进行国际化处理,所以本篇内容仅供大家了解,不做深入的探讨,希望通过本篇内容,可以帮助大家 ...
-
Angular中Constructor 和 ngOnInit 的本质区别
在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...
-
LevelDB的源码阅读(四) Compaction操作
leveldb的数据存储采用LSM的思想,将随机写入变为顺序写入,记录写入操作日志,一旦日志被以追加写的形式写入硬盘,就返回写入成功,由后台线程将写入日志作用于原有的磁盘文件生成新的磁盘数据.Leve ...
-
纪念一下学写pipeline时脑子里的坑
用的是filespipeline,用的存储地址是images的地址 测试煎蛋ooxx首页,shell测试的时候返回很多列表,但是实际爬的时候一直只返回一条,很烦,一直测一直测,就是不行,后来才发现,首 ...
-
python类的全面介绍
转载:全面介绍python面向对象的编程——类的基础 转载:类的实例方法.静态方法.类方法的区别