【原创】js中input type=file的一些问题
1.介绍
在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑、浏览的字样不能换,但是他长得到底有多丑呢。我们来看看在不同浏览器里的样子吧。
<input type="file" name="" id="" value="" />
谷歌:
IE:
FF:
看到了。在不同浏览器里他是不同的样式。作为有强迫症的同学有没有觉得看不下去了。既然长得这么丑,那么我们就有必要要给它化妆了。
2.如何美化input[type=file] 框
思路是这样的:既然长的丑就不要见人了,藏起来
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。
来看看第一个:
<a class="a-upload">
<input type="file" name="" id="">点击这里上传文件
</a>
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
} .a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
看。现在样式统一了吧。有没有摇身一变;
在看下一个:
<a class="file">选择文件
<input type="file" name="" id="">
</a>
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
既然变漂亮了。那我们也该让它接活干了
3.input[type=file]是干嘛的?创建文件上载控件,该控件带有一个文本框和一个浏览按钮。
使用input[type=file]时要注意一定要包裹在form表单内部,form表单要声明编码类型enctype="multipart/form-data"。
4.属性
input file类型控件有一个属性,名为accept
, 是用来来指定浏览器接受的文件类型,也就是的那个我们打开系统的选择文件弹框的时候,默认界面中呈现的文件类型。例如:accept="image/jpeg"
,则界面中只有jpg图片,如下截图,同时,窗体右下方是“自定义文件”按钮:
<input type="file" name="" id="" accept="image/jpeg">
accept 属性只能与 <input type="file"> 配合使用。
多个属性一起使用,使用逗号分隔。<input accept="audio/*|video/*|image/*|MIME_type">
常见的属性值
audio/* 接受所有的声音文件。
video/* 接受所有的视频文件。
image/* 接受所有的图像文件。
MIME_type 一个有效的 MIME 类型,不带参数。请参阅 IANA MIME 类型,获得标准 MIME 类型的完整列表。
5.上传前预览和Ajax传输
尤其在做图片上传时,我们会用到预览。在HTML5还没出现的旧时代,只有低版本的IE浏览器貌似有方法,使用私有的滤镜,超越安全的限制(其实是利用了不好的东西),实现图片直接预览;但是呢,那个时候,Chrome, FireFox没有这一出,于是,想要使用原生file input实现图片的上传前预览,兼容性坎很难跨过去。随着H5出现。可以让我们直接读取图片的数据,然后在页面上呈现,实现了上传前预览。对低版本的IE则可以使用滤镜去兼容。
传统的form表单提交后,页面刷新后跳转。使用Ajax让用户有了跟好的体验。HTML5里面支持二进制formData数据提交,因此,可以从容Ajax提交上传的文件数据;那老旧的IE浏览器怎么办?
一般方法如下:(此处复制)
- form元素新增
target
属性,其值指向页面内隐藏的一个<iframe>
元素的id
, 如下示意:<form action="" method="post" enctype="multipart/form-data" target="uploadIframe"><
<iframe id="uploadIframe"></iframe> - 处理
<iframe>
元素的onload
事件,获得返回内容(如下代码示意),具体细节非本文重点,不表。var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;
var response = doc.body && doc.body.innerHTML;
OK, 当然,你也可以不用像上面这么麻烦,直接使用jquery.form.js. 原理呢,就是上面这样,但是,不需要这么麻烦。
【原创】js中input type=file的一些问题的更多相关文章
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
- [置顶] js 实现 <input type="file" /> 文件上传
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...
- js 清空 input[type=file]的值
js 不能操作 input[type=file]但你可以将这个 input 的 dom 元素删除掉,再新增一个,或者替换掉 $("#UploadFile").replaceWith ...
- js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息
文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...
- html中input type=file 改变样式
<style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
Html <input id="file" type="file" accept=".map" onchange="uplo ...
- javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题
要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...
- Android WebView 不支持 H5 input type="file" 解决方法
最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...
随机推荐
- docker搭建ros-indigo-arm交叉编译环境
ROS运行环境:ARM ubuntu14.04 + ROS indigo在arm环境下编译ros应用程序,速度极慢,无法忍受,尝试在x86机器上搭建docker+ros交叉编译环境. 交叉编译环境的搭 ...
- 回答阿里社招面试如何准备,顺便谈谈对于Java程序猿学习当中各个阶段的建议
引言 其实本来真的没打算写这篇文章,主要是LZ得记忆力不是很好,不像一些记忆力强的人,面试完以后,几乎能把自己和面试官的对话都给记下来.LZ自己当初面试完以后,除了记住一些聊过的知识点以外,具体的内容 ...
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
- SQLite剖析之临时文件、内存数据库
一.7种临时文件 SQLite中,一个数据库由单个磁盘文件构成,简化了SQLite的使用,因为移动或备份数据库只要拷贝单个文件即可.这也使得SQLite适合用作应用程序文件格式.但是,当在单个文 ...
- Linux ubuntu安装
http://www.ubuntu.org.cn/download/alternative-downloads 下载地址: http://releases.ubuntu.com/ 国内镜像: http ...
- Git和Github简单教程
原文链接:Git和Github简单教程 网络上关于Git和GitHub的教程不少,但是这些教程有的命令太少不够用,有的命令太多,使得初期学习的时候需要额外花不少时间在一些当前用不到的命令上. 这篇文章 ...
- nginx的URL重写应用实例
1,NGINx的URL重写 NGINX 的URL重写模块用的比较多,主要使用的命令有if rewrite set break 2 if命令 语法如下"" 语法:if(conditi ...
- php环境的搭建
Windows下php作为Apache的子模块加载 1.安装Apache后,找到httpd.conf文件,加入下列三行 #将php作为Apache的一个模块来处理LoadModule php5_mod ...
- java spring mvc完整包下载地址
推荐使用该地址:http://maven.springframework.org/release/org/springframework/spring/ 更多详细参考地址:http://blog.cs ...
- Zabbix监控mysql主从复制状态
原理 mysql slave show slave status\G 在输出信息中查看I/O线程和SQL线程的状态值(YES为正常,NO为错误) Slave_IO_Running: Yes Slave ...