一、由前端数据生成文件并下载

1. 函数编写

由JS代码生成一个<a>标签元素。设置元素的href和download属性，为函数传入参数的文件内容和文件名，并设置元素为不可见，以消除对前端界面的视觉影响。

将元素加入body，并模拟其点击事件，即下载一个内容为fileContent、名字为fileName的文件。并在点击事件后移除元素。

// 下载文件，文件名为fileName，文件内容为fileContent
function downloadFile(fileName, fileContent) {let element = document.createElement('a');element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContent));element.setAttribute('download', fileName);element.style.display = 'none';document.body.appendChild(element);element.click();document.body.removeChild(element);
}

2. 使用方法

可以在JS代码的任意执行时刻，动态传入参数实现文件的下载。如实现点击按钮下载文件的功能，则可以在按钮的点击事件中调用函数。

    $('#button').onclick = function() {downloadFile('Hello.txt', 'Hello World!');}

二、上传文件并解析

1. 函数编写

由JS代码生成一个<input>标签元素。设置元素的type属性为file，以，并设置元素为不可见。将元素加入body，并模拟其点击事件。其会唤醒一个文件上传对话框，用户可以手动选择需要上传解析的文件。

设置元素的onchange属性，在元素内容改变时，执行以下代码：

若元素内容为空，则直接返回；
若元素内容非空，且有上传文件，则创建一个FileReader，对文件内容进行读取。读取出的内容以字符串形式，由函数的传入参数也即对文件内容进行操作的回调函数进行处理。

// 上传文件，弹出上传对话框，文件内容由uploadCallBackFunction回调函数处理
function uploadFile(uploadCallBackFunction) {let element = document.createElement('input');element.setAttribute('type', 'file');element.style.display = 'none';element.onchange = function (){if (this.value==='')return;if (this.files[0]){let reader = new FileReader();reader.readAsText(this.files[0], "UTF-8");reader.onload = function(evt){let file_string = evt.target.result;uploadCallBackFunction(file_string);}}}document.body.appendChild(element);element.click();document.body.removeChild(element);
}

2. 使用方法

由于上传文件并读文件解析的操作是异步性的（写在onchange函数中），函数无法通过返回值返回需要的文件内容。因此通过参数传入回调函数的方式，在读取文件内容后调用，对读取到的内容进行处理。

    $('#button').onclick = function () {uploadFile(console.log);}

总结

使用纯前端的方式实现了文件的上传与下载。实际场景中，可以应用于一键导入导出前端页面保存的配置等；在支持不同文件格式时，可以使用前端解析的方式使数据格式统一，降低前后端交互过程的耦合性。

JavaScript纯前端上传和下载文件相关推荐

EasyExcel+elementUI+vue 上传、下载文件实例
本文为 easyexcel使用具体实例,包含前后端代码,前端使用 vue + elementUI+axios,后端使用 spring boot. 1. 上传文件 1.1. 后端 1.1.1. 添加依赖 ...
Python实现向s3共享存储上传和下载文件
Python实现向s3共享存储上传和下载文件 https://www.cnblogs.com/liang545621/p/10298617.html 使用Python从S3上传和下载文件 https: ...
windows主机用scp命令向Linux服务器上传和下载文件
windows主机用scp命令向Linux服务器上传和下载文件文章目录: 一.scp介绍二.scp上传和下载 1.上传 2.下载三.scp的更多参数一.scp介绍 scp是secure cop ...
利用SecureCRT上传、下载文件（使用sz与rz命令）
利用SecureCRT上传.下载文件(使用sz与rz命令) 借助securtCRT,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器. 其中,对于s ...
从服务器上传和下载文件方法
1. ssh 安装SSH Secure Shell Client客户端下载链接 http://download.csdn.net/detail/jiandanjinxin/9755684 使用方法参 ...
Linux--用SecureCRT来上传和下载文件
转载自 Linux--用SecureCRT来上传和下载文件 SecureCRT下的文件传输协议有以下几种:ASCII.Xmodem.Ymodem.Zmodem ASCII:这是最快的传输协议,但只能 ...
java http 下载文件_JAVA通过HttpURLConnection 上传和下载文件的方法
本文介绍了JAVA通过HttpURLConnection 上传和下载文件的方法,分享给大家,具体如下: HttpURLConnection文件上传 HttpURLConnection采用模拟浏览器上传 ...
linux securefx 传输文件失败,解惑：如何使用SecureCRT上传和下载文件、SecureFX乱码问题...
解惑:如何使用SecureCRT上传和下载文件.SecureFX乱码问题一.前言很多时候在windows平台上访问Linux系统的比较好用的工具之一就是SecureCRT了,下面介绍一下这个软件的 ...
Linux下rz/sz安装及使用方法_上传和下载文件
2019独角兽企业重金招聘Python工程师标准>>> Linux下rz/sz安装及使用方法_上传和下载文件转载于:https://my.oschina.net/276172622 ...
springboot传入json和文件_Spring Boot之 Controller 接收参数和返回数据总结(包括上传、下载文件)...
server: port: 8088 servlet: context-path: /sid spring: mvc: view: prefix: / suffix: .html /** * 返回界面 ...

JavaScript纯前端上传和下载文件

一、由前端数据生成文件并下载

1. 函数编写

2. 使用方法

二、上传文件并解析

1. 函数编写

2. 使用方法

总结

JavaScript纯前端上传和下载文件相关推荐

最新文章

热门文章