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部分：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="Generator" content="EditPlus?">
6 <meta name="Author" content="Yvette Lau">
7 <meta name="Keywords" content="关键字">
8 <meta name="Description" content="描述">
9 <title>Document</title>
10 <style>
11 *{
12 margin:0px;
13 padding:0px;
14 font-size:22px;
15 }
16 .content{
17 background-color:#57FF57;
18 opacity:0.6;
19 padding:40px ;
20 width:600px;
21 border-radius:10px;
22 margin:20px auto;
23 }
24 input[type=‘file‘]{
25 outline:none;
26 }
27 input[type=‘button‘]{
28 border-radius:10px;
29 height:50px;
30 width:80px;
31 background-color:pink;
32 outline:none;
33 cursor:pointer;
34 }
35 input[type=‘button‘]:hover{
36 font-weight:600;
37 }
38 #details, #information, #imgInfo{
39 border-radius:10px;
40 padding:10px 20px;
41 background-color: rgba(246,255,73,0.6);
42 color:#000000;
43 display:none;
44 margin:10px;
45 -moz-user-select: none;
46 -webkit-user-select: none;
47 -ms-user-select: none;
48 user-select: none;
49 }
50 #details p, #information p, #imgInfo p{
51 font-weight: 600;
52 font-family: "Microsoft Yahei";
53 height: 40px;
54 line-height: 40px;
55 }
56 </style>
57 </head>
58 <body>
59 <div class = "content">
60 <input type = "file" id = "file" multiple = "multiple"/>
61 <input type = "button" id = "upload" value = "上传"/>
62 <div id = "details">
63 </div>
64 </div>
65
66 <div class = "content">
67 <input type = "file" id = "image" multiple = "multiple" />
68 <input type = "button" id = "show" value = "上传"/>
69 <div id = "information">
70 </div>
71 </div>
72
73 <div class = "content">
74 <input type = "file" id = "imageOnly" multiple = "multiple" accept = "image/*"/>
75 <input type = "button" id = "uploadImg" value = "上传"/>
76 <div id = "imgInfo">
77 </div>
78 </div>
79 </body>
80 </html>
JS部分：
1 <script type = "text/javascript">
2 window.onload = function(){
3 /*文件上传*/
4 var filesList = document.getElementById("file");
5 var up = document.getElementById("upload");
6 var details = document.getElementById("details");
7 /*通过正则表达式，限制文件类型*/
8 var imgList = document.getElementById("image");
9 var show = document.getElementById("show");
10 var information = document.getElementById("information");
11 /*通过file空间的自带属性accept来限制文件类型*/
12 var imageOnly = document.getElementById("imageOnly");
13 var uploadImg = document.getElementById("uploadImg");
14 var upoadImg = document.getElementById("imgInfo");
15
16 up.onclick = function(){
17 insertInformation(details, filesList);
18 }
19 show.onclick = function(){
20 insertInformation(information, imgList, /image\/\w+/);
21 }
22 uploadImg.onclick = function(){
23 insertInformation(upoadImg, imageOnly);
24 }
25
26 /*将时间格式化为“yy-mm-dd hh:mm:ss”*/
27 function FormatDate (strTime) {
28 var date = new Date(strTime);
29 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate() +" "+ date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
30 }
31
32 /*des是存放信息的对象，fileMes是file控件， pattern是正则表达式*/
33 function insertInformation(des, fileMes, pattern){
34 des.innerHTML = "";
35 for (var i = 0; i < fileMes.files.length; i++)
36 {
37 var file = fileMes.files[i];
38 if(pattern == undefined || pattern.test(file.type)){
39 des.innerHTML += "<p>文件名：" + file.name + "</p>";
40 des.innerHTML += "<p>文件类型：" + file.type + "</p>";
41 des.innerHTML += "<p>文件大小：" + file.size + "</p>";
42 des.innerHTML += "<p>最后修改时间：" + FormatDate(file.lastModifiedDate) + "</p>" + "<br/>";
43 des.style.display = "block";
44 }else{
45 alert(file.name + "的文件类型不正确");
46 }
47 }
48 }
49 };
50 </script>
上面代码的运行效果如下： 