file控件和select都是属于样式有点不受控制.
file控件以及fileList对象。
file控件:
<input type="file" id="inName" mutiple="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部分:
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
font-size:22px;
}
.content{
background-color:#57FF57;
opacity:0.6;
padding:40px ;
width:600px;
border-radius:10px;
margin:20px auto;
}
input[type='file']{
outline:none;
}
input[type='button']{
border-radius:10px;
height:50px;
width:80px;
background-color:pink;
outline:none;
cursor:pointer;
}
input[type='button']:hover{
font-weight:600;
}
#details, #information, #imgInfo{
border-radius:10px;
padding:10px 20px;
background-color: rgba(246,255,73,0.6);
color:#000000;
display:none;
margin:10px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#details p, #information p, #imgInfo p{
font-weight: 600;
font-family: "Microsoft Yahei";
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class = "content">
<input type = "file" id = "file" multiple = "multiple"/>
<input type = "button" id = "upload" value = "上传"/>
<div id = "details">
</div>
</div>
<div class = "content">
<input type = "file" id = "image" multiple = "multiple" />
<input type = "button" id = "show" value = "上传"/>
<div id = "information">
</div>
</div>
<div class = "content">
<input type = "file" id = "imageOnly" multiple = "multiple" accept = "image/*"/>
<input type = "button" id = "uploadImg" value = "上传"/>
<div id = "imgInfo">
</div>
</div>
</body>
</html>
Js部分:
window.onload=function(){
/*文件上传*/
var filesList,up,details;
filesList = document.getElementById('file');
up = document.getElementById('upload');
details = documnet.getElmentById('details');
/*通过正则表达式,限制文件类型*/
var imgList,show,information;
imgList = document.getElementById('images');
show = document.getElementById('show');
information = document.getElementById('information');
/*通过file控件的自带属性accept来限制文件类型*/
var imageOnly,uploadImg,imgInfo ;
imageOnly = document.getElementById("imageOnly");
uploadImg = document.getElementById("uploadImg");
imgInfo = document.getElementById('imgInfo');
up.onclick=function(){
insertInformation(details,filesList);
}
show.onclick=function(){
insertInformation(information,imgList,/image\/\w+/);
}
uploadImg.onclick=function(){
inertInformation(imgInfo ,imageOnly );
}
/*将时间格式化为'yy-mm-dd hh:mm:ss'*/
function FormatDate(strTime){
var date = new Date(strTime);
return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
}
/*des是存放信息的对象,fileMes是file控件,pattern是正则表达式*/
function insertInformation(des,fileMes,pattern){
des.innerHTML="";
for(var i =0; i<fileMes.files.length;i++){
var file = fileMes.files[i];
if(pattern == undefined || pattern.test(file.type)){
des.innerHTML +='<p>文件名:'+file.name+'</p>';
des.innerHTML +='<p>文件类型:'+file.type+'</p>';
des.innerHTML +='<p>文件大小:'+file.size+'</p>';
des.innerHTML +='<p>文件最后修改时间:'+FormatDate(file.lastModifiledDate)+'</p><br/>';
des.style.display='block';
}else{
alert(file.name+"的文件类型不正确”);
}
}
}
}
写了一个时间格式化的函数,将时间转变为了”yy-mm-dd hh:mm:ss”形式.
运行效果如下。