html控件file,HTML5之file控件

最近刚开始学习html5,本来应该先写点关于语义化标签的内容，鉴于自己对语义化标签的理解还不算深刻，所以，打算待自己对这部分内容有深刻理解之后，再分享。

file控件和select都是属于样式有点不受控制的两个怪胎，关于如何修改它们的样式，后面会再作介绍。本篇博客比较基础，其实就是讲file控件，以及fileList对象。

首先我学习起来属于比较慢的，必须要自己慢慢理解和体会，囫囵吞枣式的学习不太喜欢，因此，每篇博客亦不会分享太多内容，当然，仅是下文提及的一点内容，也花费了我一些时间。

file控件：

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部分：

Document

JS部分：

"; des.innerHTML += "

文件类型：" + file.type + "

"; des.innerHTML += "

文件大小：" + file.size + "

"; des.innerHTML += "

最后修改时间：" + FormatDate(file.lastModifiedDate) + "

" + "
"; des.style.display = "block"; }else{ alert(file.name + "的文件类型不正确"); } } } };

相信很多人看英文的时间格式还是会有点不习惯，没办法，谁让咱是中国人呢

所以写了一个时间格式化的函数，将时间转变为了”yy-mm-dd hh:mm:ss”形式。

上面代码的运行效果如下：