本文为代码片段记录，方便后期使用哇！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .myitem-one-list {

            width: 500px;

        }

        .ng-star-inserted {

            text-align: center;

        }

        .fileinput-button {

            position: relative;

            /* // display: inline-block; */

            overflow: hidden;

            cursor: pointer;

        }

        .fileinput-button input {

            position: absolute;

            right: 0px;

            top: -20px;

            opacity: 0;

            -ms-filter: 'alpha(opacity=0)';

            font-size: 50px;

        }

    </style>

</head>

<body>

    <div style="padding:20px;display:flex">

        <div style="text-align: center;display:inline-block;overflow: hidden;">

            <span class=" fileinput-button">

                <span  style="display:inline-block;line-height: 30px">点击上传文件</span>

                <input type="file" onChange="readExcel()" id="myfile01" />

            </span>

        </div>

    </div>

    <div>

    </div>

    <script>

        function readExcel() {

            let files = document.getElementById('myfile01').files

            console.log(files);

            if (files.length <= 0) {//如果没有文件名

                return false;

            } else if (!/\.(xls|xlsx|jpg)$/.test(files[0].name.toLowerCase()) || errorFileSize(files[0], '1MB')) {

                console.log('上传格式不正确，请上传xls或者xlsx、jpg格式,且文件大小不得超过1mb');

                return false;

            }

            const fileReader = new FileReader();

            fileReader.onload = (ev) => {

                try {

                    const data = ev.target.result;

                    console.log(data)

                    // 这里可以写其他操作啦

                } catch (e) {

                    console.log('出错了')

                    return false;

                }

            };

            fileReader.readAsDataURL(files[0]);

            // readAsArrayBuffer(file): void 异步按字节读取文件内容，结果用ArrayBuffer对象表示

            // readAsBinaryString(file): void 异步按字节读取文件内容，结果为文件的二进制串

            // readAsDataURL(file): void 异步读取文件内容，结果用data: url的字符串形式表示

            // readAsText(file, encoding): void 异步按字符读取文件内容，结果用字符串形式表示

        }

        /**

        * 限制文件大小，返回 true代表文件格式有误

        * @param {File} file 文件

        * @param {String} limitSize 限制大小

        * 使用方法：limitFileSize(files[0], '1MB')

        */

        function errorFileSize(file, limitSize) {

            var arr = ["KB", "MB", "GB"]

            var limit = limitSize.toUpperCase();

            var limitNum = 0;

            for (var i = 0; i < arr.length; i++) {

                var leval = limit.indexOf(arr[i]);

                if (leval > -1) {

                    limitNum = parseInt(limit.substr(0, leval)) * Math.pow(1024, (i + 1))

                    break

                }

            }

            if (file.size > limitNum) {

                return true

            }

            return false

        }

    </script>

</body>

</html>

JS原生上传文件，读取文件格式，控制文件只可以上传某些格式，并使用fileReader转换格式的更多相关文章

  1. 【RMAN】Oracle中如何备份控制文件？备份控制文件的方式有哪几种？

    真题1. 如何备份控制文件?备份控制文件的方式有哪几种? 答案:备份控制文件的方式有多种. ① 备份控制文件可以在线进行: SQL> ALTER DATABASE BACKUP CONTROLF ...

  2. HTML中上传与读取图片或文件（input file）----在路上（25）

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

  3. bootstrap fileinput实现限制图片上传数量及如何控制分批多次上传

    废话没有,直奔主题 问题点: fileinput提供了一个maxFileCount用于限制图片上传的数量,设置maxFileCount为1时,一次性选择超过一张会有如下提示: 当选择一张,不点上传,再 ...

  4. js - 原生ajax访问后台读取数据并显示在页面上

    1.前台调用ajax访问后台方法,并接收数据 <%@ page contentType="text/html;charset=UTF-8" language="ja ...

  5. 关于Npoi+excel文件读取，修改文件内容的处理方式

    因最近有需求场景,实现对文件的读写操作,又不单独生成新的文件,对于源文件的修改,做了一个简单实现,如下↓ // 要操作的excel文件路径 string fileName = Server.MapPa ...

  6. springboot的@Configuration文件读取static静态文件

    错误 正确

  7. 文件读取及比较&文件信息保存

    #include <stdio.h> #include <stdlib.h> //#include <regex.h> char* file_name_1 = &q ...

  8. VAuditDemo-任意文件读取

    任意文件读取是属于文件操作漏洞的一种. 一般任意文件读取漏洞可以读取配置信息.甚至系统重要文件. 严重的话,就可能导致SSRF,进而漫游内网. 文件操作漏洞 任意文件删除--删除lock 任意文件复制 ...

  9. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

随机推荐

  1. VS code 如何使用HTML Boilerplate插件

    此插件是一个HTML 模版插件,可以摆脱为 HTML 新文件重新编写头部和正文标签的苦恼. 只需在空文件中输入 html,并按 tab 键,即可生成干净的文档结构.也可以输入!,然后按tab键或者en ...

  2. 斑马打印机二维码标签制作（.prn文件）基础简单快速上手

    在工厂生产中,经常需要一线员工在电脑上输入订单号的情况.订单号往往很长,手输容易出错,并且浪费时间,所以常常使用扫码枪扫描二维码的方式输入订单号,本篇就是记录斑马打印机.prn标签模板的制作和使用. ...

  3. Redis系列9：Geo 类型赋能亿级地图位置计算

    Redis系列1:深刻理解高性能Redis的本质 Redis系列2:数据持久化提高可用性 Redis系列3:高可用之主从架构 Redis系列4:高可用之Sentinel(哨兵模式) Redis系列5: ...

  4. AK/SK加密认证

    AK/SK认证的实现 AK/SK概述 1.什么是AKSK ak/sk是一种身份认证方式,常用于系统间接口调用时的身份验证,其中ak为Access Key ID,sk为Secret Access Key ...

  5. 学习ASP.NET Core Blazor编程系列十——路由（中）

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  6. 回溯算法经典问题总结（.NET版）

    回溯算法 回溯法其实也是一种递归,本质上就是穷举,然后筛选出符合规则的数据.为了使回溯更加高效,我们根据规则要求,在穷举过程中加上条件限制(也就是剪枝). 我们什么场景下应该想到使用回溯法呢? 如何画 ...

  7. 深度学习之Tensorflow入门

    声明 本文参考[中文][吴恩达课后编程作业]Course 2 - 改善深层神经网络 - 第三周作业_何宽的博客-CSDN博客我对这篇博客加上自己的理解,力求看懂 本文所使用的资料已上传到百度网盘[点击 ...

  8. DRF认证流程及源码分析

    认证 前言 用户验证用户是否合法登陆. 部分内容在DRF视图的使用及源码流程分析讲解,建议先看讲解视图的这篇文章. 使用流程 认证使用的方法流程如下: 自定义认证类,继承BaseAuthenticat ...

  9. day29-JQuery02

    JQuery02 4.jQuery选择器02 4.3过滤选择器 4.3.1基础过滤选择器 $("li:first") //第一个li $("li:last") ...

  10. 【每日一题】【优先队列、迭代器、lambda表达式】2022年1月15日-NC119 最小的K个数

    描述 给定一个长度为 n 的可能有重复值的数组,找出其中不去重的最小的 k 个数.例如数组元素是4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4(任意顺序皆可). 数据范围: ...