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

目前，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. SIP会话发起协议 - 先知道是什么（一）

    少年,思无邪,最最动人. 协议概述 SIP会话发起协议是VoIP技术中最常用的协议之一.它是一种应用层协议,与其它应用层协议协同工作,通过Internet控制多媒体通信会话. SIP采用SDP(会话描 ...

  2. 用 VS Code 搞 Qt6：让信号和槽自动建立连接

    Qt 具备让某个对象的信号与符合要求的槽函数自动建立连接.弄起来也很简单,只要调用这个静态方法即可: QMetaObject::connectSlotsByName(...); connectSlot ...

  3. 【转】Linux文件权限

    转载一篇写得非常详细的linux文件权限,方便自己查阅! 转载来源:https://www.cnblogs.com/keyi/p/8124841.html ---------------------- ...

  4. 32bit和64bit系统的区别，运行机制浅析

    32bit:内存的最大寻址空间是2^32=4G,就是说32位系统的处理器最大只支持到4G内存 64bit:内存的最大寻址空间是2^64,大于1亿GB,但是实际上支持不到那么大的内存,大概是2^40+ ...

  5. 修改egg.js项目的默认favicon图标

    在项目根目录下的config/config.default.js文件中配置 将 .ico的图标放在一个目录中 方法一.读取本地文件 const path = require('path'); cons ...

  6. Java-ArrayList应用

    存储随机数字 ArrayListRandom.java package cn.day04; import java.util.ArrayList; import java.util.Random; p ...

  7. 重学c#系列——委托和匿名函数[二十五]

    前言 简单介绍一下什么是委托. 正文 以前也写过委托,这次算是重新归档,和新的补充吧. https://www.cnblogs.com/aoximin/p/13940125.html 有些人说委托是函 ...

  8. 基础css样式

    目录 css层叠样式表 css选择器 伪类选择器 选择器生效优先级 css字体颜色背景 设置宽高 边框 display属性 div盒子模型 float漂浮 溢出overflow 定位(position ...

  9. IdentityServer4的最佳使用

    简介   本人做微服务项目也有一段时间了,在微服务中让我感触颇深的就是这个IdentityServer4了,ID4(IdentityServer4的简称)中涉及的概念颇多,本文不谈概念(我怕读者没耐心 ...

  10. .netcore项目docker化，以及docker之间通信

    简言: 最近刚完成公司的新系统,系统使用的是微服务架构,由于领导说要将服务docker化.下面将我的研究结果分享出来,如若有错误的地方,还请各位多多指点. 目录: 什么是docker? 使用docke ...