谷歌游览器对<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='file'] 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='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
随机推荐
- 表达式树解析"框架"
干货!表达式树解析"框架"(2) 为了过个好年,我还是赶快把这篇完成了吧 声明 本文内容需要有一定基础的开发人员才可轻松阅读,如果有难以理解的地方可以跟帖询问,但我也不一定能回 ...
- 【学习笔记】锋利的jQuery(三)事件和动画
一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function( ...
- 闲话Android 之 屏幕大小、pixel、分辨率、dpi、dip
之前都是在自研的产品上做开发,而且我们的屏幕是1dip=1px的,所以在写App布局的时候,随便写单位,也没觉得什么不妥.可是近期我把以前的App里面的一些自定义控件在emulator上跑的时候,才发 ...
- 设计模式20---设计模式之备忘录模式(Memento)(行为型)
1.讲解备忘录模式 备忘录模式(Memento Pattern)又叫做快照模式(Snapshot Pattern)或Token模式,是GoF的23种设计模式之一,属于行为模式. 1.1定义 在不破坏封 ...
- copy指定目录下包括子目录中所有的文件
#include <windows.h> #include <iostream> #include <string> using namespace std; DW ...
- Bootstrap3.0学习14
Bootstrap3.0学习第十四轮(分页.徽章) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340 ...
- Xml转化为DataTable
/// <summary> /// XML转换为DataTable /// </summary> /// <param name="fileName" ...
- 用C#中实现的,调用CMD来执行BCP的代码
用C#中实现的,调用CMD来执行BCP的代码 用c#中实现,调用cmd来执行bcp的代码,大家共享!引用空间:using System;using System.Data;using System.D ...
- 《C++游戏开发》笔记十二 战争迷雾:初步实现
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9475979 作者:七十一雾央 新浪微博:http:/ ...
- excel==>csv==via phpmyadmin (edit php.ini & my.ini)==> MySQL Database
正如同标题, 标题的顺序是 先从Excel表单,保存为csv文档. 步骤: 1.这个可以用linux下的libra office打开 abc.xls 2.用libra office 将 abc.xls ...