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

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

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. 6.Ingress 七层负载

    官方文档:https://kubernetes.io/zh-cn/docs/concepts/services-networking/ingress/题目: 设置配置环境: [candidate@no ...

  2. 02 Orcad设计环境讲解与工程创建

    02   Orcad设计环境讲解与工程创建 学习目标: 1)   掌握Orcad软件绘制元件库以及原理图的方法: 2)   掌握Allegro软件绘制PCB库以及PCB的方法: 3)   掌握Orca ...

  3. async 与 promise 的区别

    async函数会引式返回一个promise,而promise的resolve值就是函数return的值 使用async和await明显节约了不少代码,不需要.then,不需要写匿名函数处理promis ...

  4. linux的统计实现

    场景: 将下面的数据里category里的分类统计计数 数据源 es_ip10000.json {"_index":"order","_type&qu ...

  5. Selenium4自动化测试2--元素定位By.ID，By.CLASS_NAME，By.TAG_NAME

    三.元素定位方式 1-通过id定位,By.ID id属性在HTML中是唯一的,因此使用id定位可以确保找到页面上唯一的元素. 由于id是唯一的,浏览器在查找元素时可以快速定位到目标元素,提高了定位的效 ...

  6. anaconda安装cv2库

    在安装cv2库之前,需要进行以下准备工作: 安装Anaconda 如果还没有安装Anaconda,可以在官网上下载对应操作系统的Anaconda安装包,然后按照提示进行安装.安装完成后,可以在终端中输 ...

  7. 数据转换3-航拍的osgb格式数据转成3dtile格式

    选择的是包含所有 osgb 文件夹的 Data 文件 文件添加成功之后,空间参考,零点坐标等会根据文件自动生成,需要更改点击设置选择即可 存储类型:选择"散列",如果没有注意到,C ...

  8. 4G EPS 中的消息类型

    目录 文章目录 目录 消息 MIB(主消息块) SIBs(多个系统消息块) 系统消息的映射和调度 系统信息的更改通知 消息 LTE 的系统消息是蜂窝网络与 UE 互相交互的与 LTE 系统相关的.特殊 ...

  9. 【活动访谈】发力数字基座 推动物联创新—航天科技控股集团AIRIOT4.0平台发布会活动专访

    近日,由航天科技控股集团股份有限公司主办的"数字基座 智慧物联-AIRIOT4.0平台发布会"在北京圆满落幕.航天三院科技委总工程师王连宝应邀出席本次会议并接受媒体采访,共同参与访 ...

  10. Centos6/RHEL6下恢复ext4文件系统下误删除的文件

    目录 一.关于ext4文件系统 二.linux文件系统的组成(inode,block) 三.问题:为什么删除比复制快? 四.问题:当我们误删除文件后,第一件事要做什么? 五.准备测试环境 六.安装ex ...