file控件，以及fileList对象。

最新推荐文章于 2024-03-22 15:48:08 发布

转载最新推荐文章于 2024-03-22 15:48:08 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/blackjiang/p/6147855.html

文章标签：

#javascript #ViewUI

本文介绍了HTML5中的file控件及其fileList对象的基础知识，包括file控件的multiple属性用于实现多选，accept属性用于指定选择文件类型。同时，展示了如何限制文件类型，以及获取文件的名称、类型、大小和最后修改时间的方法。通过实例代码展示三种不同的文件类型限制策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　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>