file控件，以及fileList对象。

　　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>

 

上面代码的运行效果如下： 
这里写图片描述

 
 

posted on 2016-12-08 23:58  jiang_zzz  阅读(4562)  评论(0)  编辑  收藏  举报

导航