【原创】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 ...
随机推荐
- 基于Calabash-andriod的UI自动化测试(1)-环境和原理
有时候,一些覆盖happy path的UI自动化还是很有用的.它的一些作用如下: 1.可以迅速实现端到端的功能回归,能够覆盖接口测试覆盖不到的一些地方,如GUI层和接口层的交互产生的问题. 2.非码农 ...
- Ubuntu 14 設定 遠端連線,讓別台電腦可以連線進來
Ubuntu 14 需 disable 加密,方可 遠端連線 此台電腦 xxx@xxx-ThinkPad-T460p:~$ gsettings set org.gnome.Vino require-e ...
- canvas链式弹性运动
上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画 ...
- [转]extjs render 用法介绍
renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子,个人是这么理解,如果你不是可以看下本文 复制代码 代码如下: var cm = new Ext.grid.Colum ...
- js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- Palindrome Index
传送门: Palindrome Index Problem Statement You are given a string of lower case letters. Your task is t ...
- C语言常见类型占用字节数
前言 最近笔试经常遇到c语言各类型变量所占字节数的问题,这里做一个总结好了. 类型 常见的有char.int.long.short.float.double及指针等. 字符类型 这里单只char,ch ...
- Android开发笔记之《JNI常用知识汇总》
参考资料: Android Studio中NDK开发 : http://www.tuicool.com/articles/NBjQnyAndroid Studio使用新的Gradle构建工具配置NDK ...
- 【原】理解javascript中的闭包
闭包在javascript来说是比较重要的概念,平时工作中也是用的比较多的一项技术.下来对其进行一个小小的总结 什么是闭包? 官方说法: 闭包是指有权访问另一个函数作用域中的变量的函数.创建闭包的常见 ...
- PHP 文件管理
主页面: <?php session_start(); $filename=""; if(!empty($_SESSION["lujing"])) { $ ...