zoukankan      html  css  js  c++  java
  • HTML5文件API

    File对象与File对象

    Blob对象

    FileReader对象

    File对象

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>定义input type="file" 的样式</title>
            <script type="text/javascript">
                function showFileName() {
                    var file;
                    for (var i = 0; i < document.getElementById("file").files.length; i++) {
                        file = document.getElementById("file").files[i];
                        console.log(file.name);
                    }
                }
            </script>
        </head>
    
        <body>
            <input type="file" id="file" multiple> /*File对象   multiple熟悉允许多个file*/
            <input type="button" onclick="showFileName()" value="上传文件"> /*显示上传的文件名*/
        </body>
    </html>

    Blob对象

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>定义input type="file" 的样式</title>
            <script type="text/javascript">
                function showFileInfo() {
                    var file;
                    for (var i = 0; i < document.getElementById("file").files.length; i++) {
                        file = document.getElementById("file").files[i];
                        var size = document.getElementById("size");//文件大小 单位Byte
                        size.innerHTML = file.size;
                        var type = document.getElementById("type");//文件类型
                        type.innerHTML = file.type;
                        if (!/image/w+/.test(file.type))/*正则表达式判断是否为图片格式*/
                            alert("请插入图片");
                        else
                            console.log("OK"); //打开浏览器审查元素 在console中显示
                    }
                }
            </script>
        </head>
    
        <body>
            <!--File->blob:size type-->
            <input type="file" id="file" multiple>
            <!--/*File对象   multiple熟悉允许多个file*/-->
            <input type="button" onclick="showFileInfo()" value="上传文件">
            <!--/*显示上传的文件名*/-->
            <br> 文件大小:
            <span id="size"></span></br>
            文件类型:<span id="type"></span>
        </body>
    
    </html>

    FileReader对象

  • 相关阅读:
    ASP.NET Core 2.2 基础知识(七) 选项模式
    ASP.NET Core 2.2 基础知识(六) 配置(内含MySql+EF)
    ASP.NET Core 2.2 基础知识(五) 环境
    ASP.NET Core 2.2 基础知识(四) URL重写中间件
    shell 环境变量
    shell 数值运算
    shell IF分支判断语句
    WINDOWS 端口查看
    mybatis-ResultMappingResolver类信息
    shell 基本概述
  • 原文地址:https://www.cnblogs.com/XDJjy/p/4696510.html
Copyright © 2011-2022 走看看