关闭

HTML5之file控件

标签: html5file控件fileList对象accept属性
6781人阅读 评论(0) 收藏 举报
分类:

最近刚开始学习html5,本来应该先写点关于语义化标签的内容,鉴于自己对语义化标签的理解还不算深刻,所以,打算待自己对这部分内容有深刻理解之后,再分享。
file控件和select都是属于样式有点不受控制的两个怪胎,关于如何修改它们的样式,后面会再作介绍。本篇博客比较基础,其实就是讲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部分:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="Generator" content="EditPlus®">
        <meta name="Author" content="Yvette Lau">
        <meta name="Keywords" content="关键字">
        <meta name="Description" content="描述">
        <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部分:

<script type = "text/javascript">
    window.onload = function(){
        /*文件上传*/
        var filesList = document.getElementById("file");
        var up = document.getElementById("upload");
        var details = document.getElementById("details");
        /*通过正则表达式,限制文件类型*/
        var imgList = document.getElementById("image");
        var show = document.getElementById("show");
        var information = document.getElementById("information");
        /*通过file空间的自带属性accept来限制文件类型*/
        var imageOnly = document.getElementById("imageOnly");
        var uploadImg = document.getElementById("uploadImg");
        var upoadImg = document.getElementById("imgInfo");

        up.onclick = function(){
            insertInformation(details, filesList);
        }
        show.onclick = function(){
            insertInformation(information, imgList, /image\/\w+/);  
        }
        uploadImg.onclick = function(){ 
            insertInformation(upoadImg, 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.lastModifiedDate) + "</p>" + "<br/>";
                    des.style.display = "block";
                }else{
                    alert(file.name + "的文件类型不正确");
                }
            }
        }
    };
</script>

相信很多人看英文的时间格式还是会有点不习惯,没办法,谁让咱是中国人呢
所以写了一个时间格式化的函数,将时间转变为了”yy-mm-dd hh:mm:ss”形式。

上面代码的运行效果如下:
这里写图片描述

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

html的file 控件

一、使用file上传文件时,如果是两次
  • KONQI
  • KONQI
  • 2014-10-11 14:08
  • 463

Input(File)控件

网页中上传文件(type=file)禁止让用户手动输入 常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框中选择本地要上传的文件。当然,如果你已经知道要上传的文件的本地路径,也可以复制路径到控件的输入框中(例如要选择的文...
  • sven_xu
  • sven_xu
  • 2015-06-02 09:17
  • 1077

HTML通过button触发input-file控件上传文件的问题

出于安全方面的考虑,通过JS修改input-file的value是无法正确上传文件的。 只有当鼠标真正单击在上传控件的浏览按钮所添加的文件才可以上传。 使用按钮触发input-file需要通过模拟实现。 方法是:在button上方添加浮动的file控件,使用户点击button时,实际上点击file控...
  • relucent
  • relucent
  • 2015-05-15 19:30
  • 7127

js中获取file控件的完整路径实例

本文章来给大家介绍一个js中获取file控件的完整路径实例,有需要了解的朋友可以参考参考。 document.getElementById(""my-file"").files办法用于获取到用户所选择的文件的凑集,一般景象下都是选择单一文件(貌似Fi...
  • weixin_37615202
  • weixin_37615202
  • 2017-08-15 15:36
  • 2173

type标签里的file类型,实现多文件上传

html 页面如下 xhr2 ...
  • xkweiguang
  • xkweiguang
  • 2016-07-05 17:04
  • 2326

HTML中input:file标签的使用

如何简单的使用 问题的由来 第一次看到别人在写网页,能够上传文件?好高大上!自己就在想这是怎么实现的?虽然当时没想出来也没有去百度了,但后来一次项目中我就需要处理文件上传这个操作。了解 些项目的时候我也没去百度,因为当时一个页面一位学长也写了文件上传。我就翻他的代码,一看,原来是这个东西 <...
  • CoralLMY
  • CoralLMY
  • 2017-10-23 17:17
  • 273

html5表单上传控件Files API

html5表单上传控件Files API
  • jyy_12
  • jyy_12
  • 2013-08-09 15:21
  • 22081

JS实现Html File控件赋值 【转】

文章出处:JS实现Html File控件赋值 网上搜索了半天也没有完整的解决方案。 用以下方法需要添加到信任站点或解除未签名的ActiveX控件的禁用   1. 模拟键盘输入法: 不足的地方是不支持中文     把设计只读且不允许自动赋值的目的是出于...
  • woshizhangliang999
  • woshizhangliang999
  • 2016-02-29 12:04
  • 1219

File杂谈——初识file控件

首先我说明下,这里介绍的file控件指的是网页中的FileUpload对象,也就是我们常见的 。如果你不是想寻找这方面的东西,就可以绕道了。 功能 当我们需要在网页中实现文件上传功能的时候,file控件就可以大显身手了。HTML文档中每添加一个  ,实际就是...
  • liucui85dan
  • liucui85dan
  • 2015-09-01 11:49
  • 197

input file控件限制上传文件类型

网页上添加一个input file HTML控件:   默认是这样的,所有文件类型都会显示出来,如果想限制它只显示我们设定的文件类型呢,比如“word“,”excel“,”pdf“文件    解决办法是可以给它添加一个accept属性,比如: 附支持的文件类型: *.3gpp...
  • lvvcs
  • lvvcs
  • 2016-10-24 10:25
  • 282
    个人资料
    • 访问:643662次
    • 积分:46848
    • 等级:
    • 排名:第75名
    • 原创:113篇
    • 转载:0篇
    • 译文:0篇
    • 评论:195条
    博客专栏
    最新评论