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

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

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. 前端关于获取网络时间的方法api

    淘宝 http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp 苏宁http://quan.suning.com/getSys ...

  2. 14、web 中间件加固-Tomcat 加固

    1.用户配置 如果不需要控制台管理,请更改控制台用户文件注销账号信息:如果需要,请更改账户信息 修改 tomcat/conf/tomcat-user.xml 文件 注释或修改如下信息 <role ...

  3. PCI-E与SATA SSD

    为什么要采用PCI-E通道 目前在固态硬盘SSD中,有一部分采用了SATA3.0接口,而一些高端的固态硬盘则采用了PCI-E接口.那么为什么高端固态硬盘要采用PCI-E接口呢?为了弄清楚这个问题,先看 ...

  4. IDEA社区版(IDEA Community Edition)创建Springboot父子项目

    1. 因为社区办不支持使用spring Spring Initializr 的方式创建项目, 但是我们可以考虑使用别的方式达到效果: 创建方式有3种: 第一种:使用https://start.spri ...

  5. java学习之旅（day.06）

    switch多选择结构 多选择结构还有一个实现方式就是switch case switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支 switch(expression ...

  6. 微信H5分享不能展示卡片问题

    来源与微信开放社区 微信H5已成功接入,微信api以及配置项验证正常,通过手机微信里面链接打开页面进行分享,分享出去的还是链接, 需要从以下场景进入才可以正常分享卡片 从二维码进入 分享卡片进入 公众 ...

  7. Istio(十)：istio多集群部署模式

    目录 一.模块概览 二.多集群部署 2.1 多集群部署 2.2 网络部署模式 2.3 控制平面部署模型 2.4 网格部署模型 2.5 租户模式 2.6 最佳多集群部署 一.模块概览 在本模块中,我们将 ...

  8. 如何启动？win11下的Linux子系统【4种方法】

    实验室的开发环境在Linux操作系统下,时不时就需要打开Linux环境去操作,而且需要本地编译或者远程SSH.这时候window和Linux切换很不方便.本科的做法就是window+虚拟机的Linux ...

  9. Linux 系统用户登录时很慢怎么办

    第一步:编辑 /etc/ssh/sshd_config 文件 vim /etc/ssh/sshd_config 第二步:搜索 DNS 第三步: 将UseDNS前面的#注释删掉,同时将UseDNS后面的 ...

  10. Linux之SELinux

    1.什么是SELinux? 安全增强型 Linux(Security-Enhanced Linux)简称 SELinux,它是一个 Linux 内核模块,也是 Linux 的一个安全子系统. SELi ...