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>
上面代碼的運行效果如下： 