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类型
MIME名称 | MIME说明 |
---|---|
image/png | PNG图片 |
image/gif | GIF图片 |
image/jpeg,image/pjpeg(PHP) | jpeg图片,即jpg格式图片 |
text/plain | 纯文本,如txt文本等 |
text/html | HTML文件 |
application/pdf | PDF文件 |
multipart/form-data | 表单数据,常用于表单或AJAX的文件上传 |
application/x-www-form-urlencoded | 表单数据,常用于表单或AJAX的POST提交 |
application/x-javascript,text/javascript | javascript脚本文件 |
text/css | CSS样式表文件 |
audio/x-wav | wav声音文件 |
audio/mpeg | MP3声音文件 |
video/vnd.rn-realvideo | RMVB视频文件 |
application/zip | zip压缩文件 |
二、样式美化
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
- )
-
- )
在服务端循环遍历这个数组就可以上传文件了。