HTML5之file控件

最新推荐文章于 2024-04-11 19:10:26 发布

qq_27628085

最新推荐文章于 2024-04-11 19:10:26 发布

阅读量1.7w

点赞数 7

分类专栏： javascript 文章标签： file

本文链接：https://blog.csdn.net/qq_27628085/article/details/90751641

版权

javascript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

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”形式.

运行效果如下。

qq_27628085

关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
HTML5之file控件

file控件和select都是属于样式有点不受控制.file控件以及fileList对象。file控件：<input type="file" id="inName" mutiple="multiple">document.getElementById("idName").file;//返回的是fileList对象。fileList对象的常用方法有name（文件名...
复制链接

扫一扫