如果文件不大的话，我们可以不经过后端的接口，直接进行文件保存与展示下载~~

目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

  • 好处：节省了一个HTTP 请求。
  • 坏处：就是浏览器不会缓存这种图像。

大家可以根据实际情况进行自由取舍。

Data URI scheme支持的类型有：

  • data:,文本数据

  • data:text/plain,文本数据

  • data:text/html,HTML代码

  • data:text/html;base64,base64编码的HTML代码

  • data:text/css,CSS代码

  • data:text/css;base64,base64编码的CSS代码

  • data:text/javascript,Javascript代码

  • data:text/javascript;base64,base64编码的Javascript代码

  • data:image/gif;base64,base64编码的gif图片数据

  • data:image/png;base64,base64编码的png图片数据

  • data:image/jpeg;base64,base64编码的jpeg图片数据

  • data:image/x-icon;base64,base64编码的icon图片数据

废话不多说，上图和代码

<!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="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>

    <h3>如果上传成功，点击下面可以进行下载</h3>

    <div id="testUpload">

    </div>

    <script>

        function readExcel() {

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

            console.log(files);

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

                return null;

            } else if (errorFileSize(files[0], '4MB')) {

                console.log('上传格式不正确，文件大小不得超过4mb');

                return null;

            }

            // 测试

            // uploadfile(files[0])

            // return

            const fileReader = new FileReader();

            fileReader.onload = (ev) => {

                try {

                    const data = ev.target.result;

                    console.log('文件读取结果:', data)

                    document.getElementById('testUpload').innerHTML = `<a download="${files[0].name}" href="${data}" style="margin-left:5px;margin-right:5px;"><br><span style="margin-left:5px;margin-right:5px;">${files[0].name}</span></a>`

                } catch (e) {

                    console.log('文件获取出错了~')

                    return null;

                }

            };

            fileReader.readAsDataURL(files[0]);

        }

        /**

         * 限制文件大小，返回 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>

代码小DEMO随笔---不经过后端接口，JS上传文件读取文件，展示到页面提供下载功能的更多相关文章

  1. el-upload控件一次接口请求上传多个文件

    el-upload组件默认情况下上传多少个文件就会请求多少次上传接口,如何一次上传多个文件而不必多次请求上传接口呢?直接看代码 html <el-upload :action="act ...

  2. 代码小DEMO随笔---JS原生手机版本alert弹框

    之前的随笔写的是WEB版本的弹框,这次是手机版本,欢迎路过的大佬们提出更好的写法~~ <!DOCTYPE html> <html lang="en"> &l ...

  3. uni-app开发的应用(小程序,app,web等),使用Node+Koa2开发的后端程序接收上传文件的方法

    uni-app使用使用Node+Koa2开发的后端程序接收上传的文件 通过gitbook浏览此随笔 通过其它客户端上传(h5,小程序等),接收方法一致 使用koa接收时,我们需安装一个中间件koa-b ...

  4. 框架基础：ajax设计方案（三）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  5. 前端通信：ajax设计方案（四）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  6. 循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

    在我们一般系统中,往往都会涉及到附件的处理,有时候附件是图片文件,有时候是Excel.Word等文件,一般也就是可以分为图片附件和其他附件了,图片附件可以进行裁剪管理.多个图片上传管理,及图片预览操作 ...

  7. java微信接口之四—上传素材

    一.微信上传素材接口简介 1.请求:该请求是使用post提交地址为: https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token=A ...

  8. 图片的URL上传至阿里云OSS操作（微信小程序二维码返回的二进制上传到OSS）

    当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作  把url中的图片文件下载到本地(或者上传到私有云中)  public String uploadUrlToOss ...

  9. 微信小程序授权登录--PHP后端接口

    由于之前做过公众号的一个开发,所以再开发小程序就没有那么多坑了,在这也记录一下开发过程,以方便后续进行参考. 废话不多说,直接上官方文档,任何使用第三方开发的,不看文档就是耍流氓.小程序开发文档,可以 ...

随机推荐

  1. Python 多重继承时metaclass conflict问题解决与原理探究

    背景 最近有一个需求需要自定义一个多继承abc.ABC与django.contrib.admin.ModelAdmin两个父类的抽象子类,方便不同模块复用大部分代码,同时强制必须实现所有抽象方法,没想 ...

  2. Windows下自动云备份思源笔记到Gitee

    前言 思源笔记是一款本地笔记为主的软件,其目前提供了148元/year的付费同步功能,但对于21世纪中国难民而言还是太贵啦. 条件允许的同学还是使用官方的同步,支持下作者. 所以,就在思考有没有白嫖的 ...

  3. 5 why 分析法，一种用于归纳抽象出解决方案的好方法

    最近在看了<微信背后的产品观 - 张小龙手抄版>,其中有段话如下: 用户需求是零散的,解决方案是归纳抽象的过程 那如何归纳抽象呢?是否有一定的实践方法论呢?经过一轮探讨和学习,有这些答案: ...

  4. JVM学习笔记——类加载和字节码技术篇

    JVM学习笔记--类加载和字节码技术篇 在本系列内容中我们会对JVM做一个系统的学习,本片将会介绍JVM的类加载和字节码技术部分 我们会分为以下几部分进行介绍: 类文件结构 字节码指令 编译期处理 类 ...

  5. 执行xxx.sh脚本的两种方式

    因公司测试环境的登录模式有2种,大佬们直接写了个脚本完成一键切换,看了其中的脚本文件,其中出现了send "sh out.sh\r":一直疑惑这里的sh out.sh的意思...查 ...

  6. created与mounted执行顺序（关于微任务与宏任务）

    1.ps:只要你只使用created或者mounted中的一个不就好了吗[dog].这样只要在第一个异步任务代码跳出前,嵌套第二个任务函数就好了 最后面的两个链接一个是微任务与宏任务的通俗例子,一个是 ...

  7. <二>掌握构造函数和析构函数

    构造函数 和类名相同,可以带参数,参数可以有多个 构造函数执行完成后,内存开辟完成,同时可以完成初始化工作. 析构函数 ~Test(); 析构函数可以自己调用,析构函数调用后,对象不存在了.自己调了析 ...

  8. 基于iNeuOS工业互联网平台的板材实时质检系统

    1.  项目背景 刨花板生产线由于原料.生产工艺等原因,会有一些产品板面出现颤纹.漏砂.胶斑.胶块.大刨花.粉尘斑.板面划痕和油污等缺陷.表面缺陷会降低板材强度.影响板材外观和二次加工,给企业带来经济 ...

  9. Centos7.6分区、格式化、自动挂载磁盘

    个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github‍:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying 目录 1. 添加硬盘 2. 执行fdisk -l ...

  10. ROS应用层通信协议解析

    参考:http://wiki.ros.org/ROS/Master_API http://wiki.ros.org/ROS/Connection Header 说明 ROS本质上就是一个松耦合的通信框 ...