现下，网络越来越快，浏览器的功能和性能越来越好，所以很多时候，已经不需要一些复杂的框架来实现不是非常复杂的功能。

我们只有在以下情况才会考虑使用框架或者现成的第三方组件：

1.功能复杂，自己写没有必要

2.有必要套套壳子，在必要的时候更换壳子内的功能

只不过我本人，更加喜欢自己动手，也更加喜欢原生的东西。

以下代码是通过多个网络来源组装而成的，此处不在一一列出出处。

例子中示例了三个基本功能：

1.浏览器读文件，并使用ajax上传文件

2.原生方式上传文件

3.浏览器写文件，借助了第三方的fileSaver.js

4.POST json参数并下载附件

例子一：ajax上传文件、原生方式上传文件、FileSaver.js保存文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Js实现文件上传功能</title>

    <link rel="stylesheet" href="/css/msgbox.css" />

    <link rel="stylesheet" href="/plugin/jquery/jquery-confirm/dist/jquery-confirm.min.css">

    <link rel="stylesheet" href="/css/public.css">

    <style>

        .a-upload {

            position: relative;

            display: inline-block;

            background: #D0EEFF;

            border: 1px solid #99D3F5;

            border-radius: 4px;

            padding: 4px 12px;

            overflow: hidden;

            color: #1E88C7;

            text-decoration: none;

            text-indent: 0;

            line-height: 20px;

        }

        .a-upload input {

            position: absolute;

            font-size: 100px;

            right: 0;

            top: 0;

            opacity: 0;

        }

        .a-upload:hover {

            background: #AADFFD;

            border-color: #78C3F3;

            color: #004974;

            text-decoration: none;

        }

    </style>

</head>

<body>

    <div style="display: none;">

        <h3>原生上传</h3>

        <form method="post" enctype="multipart/form-data" id="upload">

            <a href="javascript:;" id="pic" class="a-upload">

                <input type="file" name="file">点击这里上传文件

            </a>

            <input type="button" value="提交" onclick="uploadPic()">

            <span class="showUrl"></span>

            <img src="" alt="" class="showPic">

        </form>

    </div>

    <h3>本地读取文件</h3>

    <hr>

    <legend>

        <div>

            <input type="file" name="metaFile" id="metaFile">

            <input type="button" value="上传" onclick="uploadMeta()">

            <div>

                <div class="input-condition">

                    <label>是否覆盖现有表单:</label>

                    <input type="checkbox" id="overwriteExists" onchange="showNewSection()">

                </div>

                <div class="input-condition none-overwrite">

                    <label>新的表单存储名称:</label>

                    <input type="text" id="newDbname">

                </div>

                <div class="input-condition none-overwrite">

                    <label>新的表单显示名称:</label>

                    <input type="text" id="newShowName">

                </div>

            </div>

        </div>

    </legend>

    <h3>保存到本地</h3>

    <div>

        <label>tableId:</label><input type="text" id="tableId">

        <input type="button" onclick="exportMeta()" value="保存到本地">

    </div>

</body>

<script src="/plugin/jquery/jquery-3.4.1.min.js"></script>

<!-- 提示框的引入 -->

<script type="text/javascript" src="/promptbox/js/msgbox.js"></script>

<script type="text/javascript" src="/promptbox/init_hide.js"></script>

<script src="/plugin/jquery/jquery-confirm/dist/jquery-confirm.min.js"></script>

<!-- 前端保存工具引入 -->

<script src="/plugin/common/FileSaver.js"></script>

<!-- jquery 全局侦听重定向 -->

<script src="/plugin/jquery/jquery.pub.js"></script>

<script>

    function exportMeta() {

        let sTableId = $("#tableId").val();

        $.ajax({

            url: "/custom/tool/getTableMeta",

            type: 'post',

            data: {

                "tableId": sTableId

            },

            success: function (res) {

                if (res.flag==1){

                    var blob = new Blob([res.data.tableMetaJson], { type: "text/plain;charset=utf-8" });

                    saveAs(blob, "tableMeta.json");

                }

                else{

                    clickAutoHide(2,res.msg, null);

                }

            },

            error: function (err) {

                alert('网络失败，请稍后再试', err)

            }

        })

    }

    function showNewSection() {

        if (document.getElementById("overwriteExists").checked) {

            $(".none-overwrite").css("display", "none");

        }

        else {

            $(".none-overwrite").css("display", "block");

        }

    }

    function uploadMeta() {

        //获取读取我文件的File对象

        let selectedFile = document.getElementById('metaFile').files[0];

        let name = selectedFile.name; //读取选中文件的文件名

        let size = selectedFile.size; //读取选中文件的大小

        console.log("文件名:" + name + "大小:" + size);

        let reader = new FileReader(); //这是核心,读取操作就是由它完成.

        reader.readAsText(selectedFile); //读取文件的内容,也可以读取文件的URL

        reader.onload = function (e) {

            //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可

            var metaString = this.result;

            $.ajax({

                url: "/test/custom/tool/importTableMeta",

                type: 'post',

                data: {

                    "metaString": metaString,

                    "overwriteExists": false,//不覆盖现有的

                    "newDbname": "testload001",

                    "newShowName": "导入测试001"

                },

                success: function (res) {

                    alert(res.msg);

                },

                error: function (err) {

                    alert('网络失败，请稍后再试', err)

                }

            })

        }

    }

    function uploadPic() {

        let form = document.getElementById('upload')

        let formData = new FormData(form);

        $.ajax({

            url: "/test/attach/upload",

            type: 'post',

            data: formData,

            processData: false,

            success: function (res) {

                if (res) {

                    alert('上传成功')

                }

                $('#pic').val('');

                $(".showUrl").html(res);

                $(".showPic").attr("src", res);

            },

            error: function (err) {

                alert('网络失败，请稍后再试', err)

            }

        })

    }

</script>

</html>

例子二、原生发送json参数并下载附件

/**

 * 导出所有满足条件的内容为excel格式

 */

function exportClick() {

  let _param = getParamValue();

  var url = '/log/srv/export';

  var xhr = new XMLHttpRequest();

  xhr.open('POST', url, true);    // 也可以使用POST方式，根据接口

  xhr.setRequestHeader('content-type', 'application/json');

  xhr.responseType = "blob";  // 返回类型blob

  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑

  xhr.onload = function () {

    // 请求完成

    if (this.status === 200) {

      var blob = this.response;

      var reader = new FileReader();

      reader.readAsDataURL(blob);

      reader.onload = function (e) {

        // 转换完成，创建一个a标签用于下载

        var a = document.createElement('a');

        a.download = '服务日志.xlsx';

        a.href = e.target.result;

        $("body").append(a);

        a.click();

        $(a).remove(); //记得移除，否则多点击几次后，页面会累积太多标签

      };

    }

  };

  // 发送ajax请求

  xhr.send(JSON.stringify(_param));

}

注：后端是直接输出二进制流的

try {

            String outputFileName = fileName;

            if (userAgent.toUpperCase().indexOf("MSIE") > 0) {

                outputFileName = URLEncoder.encode(fileName, "UTF-8");

            } else if (userAgent.toUpperCase().indexOf("IPHONE") > 0) {

                outputFileName = new String(fileName.getBytes(), "ISO-8859-1");

            } else {

                outputFileName = new String(fileName.getBytes("utf-8"), "ISO-8859-1");

            }

            response.setContentType("application/octet-stream");

            response.setHeader("Content-disposition", "attachment; filename=\"" + outputFileName + "\"");

            wb.write(response.getOutputStream());

            response.getOutputStream().flush();

        } catch (Exception e) {

            System.out.println(e.getMessage());

        }

js-文件读写和上传下载的简单例子01的更多相关文章

  1. js文件夹上传下载组件

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  2. [转]python3之paramiko模块（基于ssh连接进行远程登录服务器执行命令和上传下载文件的功能）

    转自:https://www.cnblogs.com/zhangxinqi/p/8372774.html 阅读目录 1.paramiko模块介绍 2.paramiko的使用方法 回到顶部 1.para ...

  3. linux链接及文件互相上传下载

    若排版紊乱可查看我的个人博客原文地址 基本操作 本篇博客主要介绍如何去链接远程的linux主机及如何实现本地与远程主机之间文件的上传下载操作,下面的linux系统是CentOS6.6 链接远程linu ...

  4. Spring实现文件的上传下载

    背景:之前一直做的是数据库的增删改查工作,对于文件的上传下载比较排斥,今天研究了下具体的实现,发现其实是很简单.此处不仅要实现单文件的上传,还要实现多文件的上传. 单文件的下载知道了,多文件的下载呢? ...

  5. JAVAWEB之文件的上传下载

    文件上传下载 文件上传: 本篇文章使用的文件上传的例子使用的都是原生技术,servelt+jdbc+fileupload插件,这也是笔者的习惯,当接触到某些从未接触过的东西时,总是喜欢用最原始的东西将 ...

  6. [实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件

    写在前面 之前的上传文件的功能,只能上传到根目录,前两篇文章实现了新建文件夹的功能,则这里对上传文件的功能进行适配. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战] ...

  7. 使用Fileupload完成文件的上传下载

    目录 使用Fileupload完成文件的上传下载 为什么需要进行文件上传下载? 引入jar包 文件上传 注意事项 编写一个简单的文件上传jsp页面 编写Servlet Student类用于封装数据,后 ...

  8. 在Window的IIS中创建FTP的Site并用C#进行文件的上传下载

    文件传输协议 (FTP) 是一个标准协议,可用来通过 Internet 将文件从一台计算机移到另一台计算机. 这些文件存储在运行 FTP 服务器软件的服务器计算机上. 然后,远程计算机可以使用 FTP ...

  9. 创建FTP的Site并用C#进行文件的上传下载

    创建FTP的Site并用C#进行文件的上传下载 文件传输协议 (FTP) 是一个标准协议,可用来通过 Internet 将文件从一台计算机移到另一台计算机. 这些文件存储在运行 FTP 服务器软件的服 ...

  10. SocketIo+SpringMvc实现文件的上传下载

    SocketIo+SpringMvc实现文件的上传下载 socketIo不仅可以用来做聊天工具,也可以实现局域网(当然你如果有外网也可用外网)内实现文件的上传和下载,下面是代码的效果演示: GIT地址 ...

随机推荐

  1. 记联软 UniAccess 导致 NSIS 安装包启动进程失效

    本文记录联软 UniAccess 注入的 C:\Window\LVUAAgentInstBaseRoot\syswow64\MozartBreathCore.dll 导致 NSIS 安装包启动进程失效 ...

  2. dotnet 部署 github 的 Action 进行持续集成

    被微软收购的 GitHub 现在十分土豪,提供了免费的服务器给咱构建.刚好微软对 dotnet 的支持是特别好的,毕竟还算半个自家的东西,大概只需要 3 分钟就可以在 github 上通过 Actio ...

  3. Redisant Toolbox——面向开发者的多合一工具箱

    Redisant Toolbox--面向开发者的多合一工具箱 Redisant Toolbox 拥有超过30种常用的开发工具:精心设计,快速.高效:离线使用,尊重您的隐私.官网地址:http://ww ...

  4. 笔记06-第六讲 Cadence同一页面建立电气互连

    笔记06-第六讲 Cadence同一页面建立电气互连 内容: 90度和任意角度连线; 连线方式; 十字线添加/删除连接点; Net alias; 无连接的管脚处理; 注意事项. 连线有两种方式,右侧工 ...

  5. 云原生最佳实践系列 7：基于 OSS Object FC 实现非结构化文件实时处理

    01 方案概述 现在绝大多数客户都有很多非结构化的数据存在 OSS 中,以图片,视频,音频居多.举一个图片处理的场景,现在各种终端种类繁多,不同的终端对图片的格式.分辨率要求也不同,所以一张图片往往会 ...

  6. MindSpore强化学习：使用PPO配合环境HalfCheetah-v2进行训练

    本文分享自华为云社区<MindSpore强化学习:使用PPO配合环境HalfCheetah-v2进行训练>,作者: irrational. 半猎豹(Half Cheetah)是一个基于Mu ...

  7. 2021年5.21NCU第四届校赛

    比赛地址:http://222.204.50.106/contest/39 A 树上祖先 链接:http://222.204.50.106/contest/39/problem/A B 莎士比亚 链接 ...

  8. ubuntu16下升级python3的版本--升级到3.8

    ubuntu16下升级python3的版本,这里是升级到3.8. 1.首先添加安装源,在命令行输入如下命令: $ sudo add-apt-repository ppa:jonathonf/pytho ...

  9. Review社区PR的方式

    有时候review社区改动较大的PR时,在github上看不太方便,需要把相应的pr,apply到本地,记录下常用的方式 # 添加pr仓库 git remote add ${upstream_name ...

  10. 线程中使用for循环的add或remove方法的两种方案

    简介 (Introduction): 背景 在使用线程中添加list的元素时,使用add或remove就会产生异常. 分析 该list每当删除/添加一个元素时,集合的size方法的值都会减小1,这将直 ...