最近刚开始学习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部分:
DocumentJS部分:
"; 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”形式。
上面代码的运行效果如下: