html5学习4:HTML5之input:file说明
来源:互联网 发布:网络水军有多少 编辑:程序博客网 时间:2024/04/29 22:30
http://qianduanblog.com/post/html5-learning-4-html5-input-file.html
一、input:file属性
属性值有以下几个比较常用:
accept
:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。multiple
:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。
1、accept
- 只能选择png和gif图片
- <input id="fileId1" type="file" accept="image/png,image/gif" name="file" />
2、multiple
- 多文件上传
- <input id="fileId2" type="file" multiple="multiple" name="file" />
3、常用MIME类型
二、样式美化
input:file
比较特殊,无法使用具体的样式来规范它,在不同的浏览器上都有不同的样式。前期写过关于美化input:file
的文章,详见:CSS学习之3:html input[type=file] css样式美化 - 前端博客。这里说明的样式美化和这篇文章类似:
首先要在input
外包一层标签,通常为a
标签(a标签的href
属性不建议为#),然后设置.file
为相对定位和行类块属性,设置input:file
的文字大小和绝对定位,即:
- <a href="javascript:;" 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;
- }
三、AJAX上传文件
在说到ajax上传文件,之前的文章也有说过(详见:JS学习32:html5拖拽图片批量ajax无刷新进度上传)。ajax上传的时候,需要获得input:file选择的文件(可能为多个文件),获取其文件列表为:
- // input标签的files属性
- document.querySelector("#fileId").files
- // 返回的是一个文件列表数组
获得的文件列表,然后遍历插入到表单数据当中。即:
- // 获得上传文件DOM对象
- var oFiles = document.querySelector("#fileId");
- // 实例化一个表单数据对象
- var formData = new FormData();
- // 遍历图片文件列表,插入到表单数据中
- for (var i = 0, file; file = oFiles[i]; i++) {
- // 文件名称,文件对象
- formData.append(file.name, file);
- }
获得表单数据之后,就可以用ajax的POST上传。
- // 实例化一个AJAX对象
- var xhr = new XMLHttpRequest();
- xhr.onload = function() {
- alert("上传成功!");
- }
- xhr.open("POST", "upload.php", true);
- // 发送表单数据
- xhr.send(formData);
上传到服务器之后,获取到文件列表为:
- Array
- (
- [jpg_jpg] => Array
- (
- [name] => jpg.jpg
- [type] => image/jpeg
- [tmp_name] => D:\xampp\tmp\phpA595.tmp
- [error] => 0
- [size] => 133363
- )
- [png_png] => Array
- (
- [name] => png.png
- [type] => image/png
- [tmp_name] => D:\xampp\tmp\phpA5A6.tmp
- [error] => 0
- [size] => 1214628
- )
- )
在服务端循环遍历这个数组就可以上传文件了。
0 0
- html5学习4:HTML5之input:file说明
- html5之input标签学习
- html5 file上传,input file
- html5 input file 打开过慢
- html5学习-input标签
- HTML5之file控件
- HTML5:input file控件限制上传文件类型
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- HTML5的 input:file上传类型控制
- 关于HTML5的FileReader这个高级货的用法
- 每一个程序员需要了解的10个Linux命令
- 使用JavaScript进行基本图形操作与处理
- HTML5 File API: How to see the result of readAsText()
- 安装eclipse maven插件(手动离线安装)
- html5学习4:HTML5之input:file说明
- 机器学习与智能优化 之 学习有道
- POJ 2739 - Sum of Consecutive Prime Numbers(素数筛法+前缀和 / 尺取法)
- mahout-0.9的安装配置
- LightOJ 1189 - Sum of Factorials(贪心)
- 用绘制控件绘制要素示例(openlayers)
- [System Design]Scalability for Dummies学习笔记
- LightOJ 1078 - Integer Divisibility(取模运算)
- 从网络获取时实天气信息并动态生成