file控件，以及fileList对象。

最新推荐文章于 2022-10-27 14:32:58 发布

weixin_30788619

最新推荐文章于 2022-10-27 14:32:58 发布

阅读量588

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/blackjiang/p/6147855.html

版权

本文介绍了HTML5中的file控件及其fileList对象的基础知识，包括file控件的multiple属性用于实现多选，accept属性用于指定选择文件类型。同时，展示了如何限制文件类型，以及获取文件的名称、类型、大小和最后修改时间的方法。通过实例代码展示三种不同的文件类型限制策略。

摘要由CSDN通过智能技术生成

　　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;

最低0.47元/天解锁文章

weixin_30788619

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
file控件，以及fileList对象。

　　file控件和filelist对象基础知识。　　 file控件：　　<input type = "file" id = "idName" multiple = "multiple">　　document.getElementById("idName").file; //返回的是fileList对象。　　fileList对象的常用方法有name（文件名称...
复制链接

扫一扫