file控件，以及fileList对象。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
上面代码的运行效果如下：
以上是关于file控件，以及fileList对象。的主要内容，如果未能解决你的问题，请参考以下文章
如何在 FileList 对象中设置文件对象和长度属性，其中文件也反映在 FormData 对象中？