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

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

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. 聊聊流言协议（Gossip）

    什么是流言协议? 在分布式系统中,以下两个是典型的问题: 维护系统状态(节点的活跃性) 节点间的通信 解决这些问题的解决方案之一如下: 集中式状态管理服务 对等状态管理服务 集中式状态管理服务 像 A ...

  2. 几种常见Ruby on Rails内置方法介绍

    Ruby on Rails是一个功能强大的WEB开发框架,在这里我们将会学到一些经常用到的Ruby on Rails内置方法,帮助大家熟练掌握其应用技巧. Ruby on Rails自动生成文档技巧大 ...

  3. 关于sql server导出csv格式文件的身份证号乱码问题处理办法

    1.使用SQL Server数据库经常会遇到导出大量数据的情况,例如导出40万条数据,虽然EXCL支持可以放入百万的数据,但是使用数据库复制,粘贴到EXCL表格时,数据库会提示溢出的情况,如下图所示: ...

  4. HTTP 报文详解

    报文的语法 所有的 HTTP 报文都可以分为两类:请求报文和响应报文.请求报文会向 Web 服务器请求一个动作,响应报文会将请求的结果返回给客户端.请求和响应报文的基本报文结构相同 请求报文的格式: ...

  5. 如何使用Splashtop在家里进行有效的新人入职培训

    编辑搜图 请点击输入图片描述 今天的新闻有点不简单,不得了. 简而言之,利用Splashtop可以在家里进行有效的新人入职培训.最棒的地方就在于--两个用户可以远程访问同一台计算机,并且可以看到彼此的 ...

  6. docker之docker-compose

    docker-compose就是个二进制的工具,它可以单机编排,批量管理多个容器 [root@mcwk8s01 harbor]# file /usr/local/bin/docker-compose ...

  7. YiShaAdmin：一款基于.NET Core Web + Bootstrap的企业级快速开发框架

    前言 今天大姚给大家分享一款基于.NET Core Web + Bootstrap的企业级快速后台开发框架.权限管理系统,代码简单易懂.界面简洁美观(基于MIT License开源,免费可商用):Yi ...

  8. 推荐几款卓越的 .NET 开源搜索组件

    前言 在当今日益数据化的世界中,信息的检索和搜索功能对于各种应用来说变得至关重要. 无论是电子商务网站.企业资源规划系统.还是内容管理系统,高效的搜索功能都是提升用户体验.促进业务发展的关键. 因此, ...

  9. OpenOCD + DAP-LINK调试ESP32的失败经历（2）

    背景 https://www.cnblogs.com/liteng0305/p/17018299.html 上次使用乐鑫编译好的OpenOCD失败,可能是因为没有开启CMSIS-DAP支持,手动开启编 ...

  10. RocketMQ事务消息源码解析

    RocketMQ提供了事务消息的功能,采用2PC(两阶段协议)+补偿机制(事务回查)的分布式事务功能,通过这种方式能达到分布式事务的最终一致. 一. 概述 半事务消息:指的是发送至broker但是还没 ...