最近刚开始学习html5,本来应该先写点关于语义化标签的内容，鉴于自己对语义化标签的理解还不算深刻，所以，打算待自己对这部分内容有深刻理解之后，再分享。
file控件和select都是属于样式有点不受控制的两个怪胎，关于如何修改它们的样式，后面会再作介绍。本篇博客比较基础，其实就是讲file控件，以及fileList对象。
首先我学习起来属于比较慢的，必须要自己慢慢理解和体会，囫囵吞枣式的学习不太喜欢，因此，每篇博客亦不会分享太多内容，当然，仅是下文提及的一点内容，也花费了我一些时间。
file控件：
~~~
<input type = "file" id = "idName" multiple = "multiple">
document.getElementById("idName").file; //返回的是fileList对象。
~~~
fileList对象的常用方法有name（文件名称）、type（文件类型）、size（文件大小）、lastModefiedDate（文件的最后修改时间）等
默认情况下，选择文件为单选，但是加上multiple属性之后，即可以多选。
此处的multiple属性，只写”multiple”或者是写成”multiple=’multiple’”这种形式都是可以，这点类似于autofocus,loop这类属性。个人习惯写成multiple=’multiple’这种格式。
此外，file控件还有accept属性，用于指定选择文件类型。
accept=”application/msexcel”
accept=”application/msword”
accept=”application/pdf”
accept=”application/poscript”
accept=”application/rtf”
accept=”application/x-zip-compressed”
accept=”audio/basic”
accept=”audio/x-aiff”
accept=”audio/x-mpeg”
accept=”audio/x-pn/realaudio”
accept=”audio/x-waw”
accept=”image/gif”
accept=”image/jpeg”
accept=”image/tiff”
accept=”image/x-ms-bmp”
accept=”image/x-photo-cd”
accept=”image/x-png”
accept=”image/x-portablebitmap”
accept=”image/x-portable-greymap”
accept=”image/x-portable-pixmap”
accept=”image/x-rgb”
accept=”text/html”
accept=”text/plain”
accept=”video/quicktime”
accept=”video/x-mpeg2”
accept=”video/x-msvideo”
下面的代码对应三部分内容：
1、文件类型不限，显示文件的文件名、文件类型、文件大小和文件的最后修改时间
2、限制文件类型为图片，通过正则表达式的形式，在选择之后判断，显示文件的文件名、文件类型、文件大小和文件的最后修改时间
3、限制文件类型为图片，通过accept属性，在选择文件时限制，显示文件的文件名、文件类型、文件大小和文件的最后修改时间
代码如下：
**HTML部分：**
~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Yvette Lau">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
font-size:22px;
}
.content{
background-color:#57FF57;
opacity:0.6;
padding:40px ;
width:600px;
border-radius:10px;
margin:20px auto;
}
input[type='file']{
outline:none;
}
input[type='button']{
border-radius:10px;
height:50px;
width:80px;
background-color:pink;
outline:none;
cursor:pointer;
}
input[type='button']:hover{
font-weight:600;
}
#details, #information, #imgInfo{
border-radius:10px;
padding:10px 20px;
background-color: rgba(246,255,73,0.6);
color:#000000;
display:none;
margin:10px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#details p, #information p, #imgInfo p{
font-weight: 600;
font-family: "Microsoft Yahei";
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class = "content">
<input type = "file" id = "file" multiple = "multiple"/>
<input type = "button" id = "upload" value = "上传"/>
<div id = "details">
</div>
</div>
<div class = "content">
<input type = "file" id = "image" multiple = "multiple" />
<input type = "button" id = "show" value = "上传"/>
<div id = "information">
</div>
</div>
<div class = "content">
<input type = "file" id = "imageOnly" multiple = "multiple" accept = "image/*"/>
<input type = "button" id = "uploadImg" value = "上传"/>
<div id = "imgInfo">
</div>
</div>
</body>
</html>
~~~
JS部分：
~~~
<script type = "text/javascript">
window.onload = function(){
/*文件上传*/
var filesList = document.getElementById("file");
var up = document.getElementById("upload");
var details = document.getElementById("details");
/*通过正则表达式，限制文件类型*/
var imgList = document.getElementById("image");
var show = document.getElementById("show");
var information = document.getElementById("information");
/*通过file空间的自带属性accept来限制文件类型*/
var imageOnly = document.getElementById("imageOnly");
var uploadImg = document.getElementById("uploadImg");
var upoadImg = document.getElementById("imgInfo");
up.onclick = function(){
insertInformation(details, filesList);
}
show.onclick = function(){
insertInformation(information, imgList, /image\/\w+/);
}
uploadImg.onclick = function(){
insertInformation(upoadImg, imageOnly);
}
/*将时间格式化为“yy-mm-dd hh:mm:ss”*/
function FormatDate (strTime) {
var date = new Date(strTime);
return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate() +" "+ date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
/*des是存放信息的对象，fileMes是file控件， pattern是正则表达式*/
function insertInformation(des, fileMes, pattern){
des.innerHTML = "";
for (var i = 0; i < fileMes.files.length; i++)
{
var file = fileMes.files[i];
if(pattern == undefined || pattern.test(file.type)){
des.innerHTML += "<p>文件名：" + file.name + "</p>";
des.innerHTML += "<p>文件类型：" + file.type + "</p>";
des.innerHTML += "<p>文件大小：" + file.size + "</p>";
des.innerHTML += "<p>最后修改时间：" + FormatDate(file.lastModifiedDate) + "</p>" + "<br/>";
des.style.display = "block";
}else{
alert(file.name + "的文件类型不正确");
}
}
}
};
</script>
~~~
相信很多人看英文的时间格式还是会有点不习惯，没办法，谁让咱是中国人呢
所以写了一个时间格式化的函数，将时间转变为了”yy-mm-dd hh:mm:ss”形式。
上面代码的运行效果如下：
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法（二）
- JS this词法（三）
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证（登录/注册）
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单（一）
- Bootstrap表单（二）
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异（checkbox）
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器（全）
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述（推荐）
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解