js-文件读写和上传下载的简单例子01
现下，网络越来越快，浏览器的功能和性能越来越好，所以很多时候，已经不需要一些复杂的框架来实现不是非常复杂的功能。
我们只有在以下情况才会考虑使用框架或者现成的第三方组件：
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的更多相关文章
- js文件夹上传下载组件
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- [转]python3之paramiko模块（基于ssh连接进行远程登录服务器执行命令和上传下载文件的功能）
转自:https://www.cnblogs.com/zhangxinqi/p/8372774.html 阅读目录 1.paramiko模块介绍 2.paramiko的使用方法 回到顶部 1.para ...
- linux链接及文件互相上传下载
若排版紊乱可查看我的个人博客原文地址 基本操作 本篇博客主要介绍如何去链接远程的linux主机及如何实现本地与远程主机之间文件的上传下载操作,下面的linux系统是CentOS6.6 链接远程linu ...
- Spring实现文件的上传下载
背景:之前一直做的是数据库的增删改查工作,对于文件的上传下载比较排斥,今天研究了下具体的实现,发现其实是很简单.此处不仅要实现单文件的上传,还要实现多文件的上传. 单文件的下载知道了,多文件的下载呢? ...
- JAVAWEB之文件的上传下载
文件上传下载 文件上传: 本篇文章使用的文件上传的例子使用的都是原生技术,servelt+jdbc+fileupload插件,这也是笔者的习惯,当接触到某些从未接触过的东西时,总是喜欢用最原始的东西将 ...
- [实战]MVC5+EF6+MySql企业网盘实战(12)——新建文件夹和上传文件
写在前面 之前的上传文件的功能,只能上传到根目录,前两篇文章实现了新建文件夹的功能,则这里对上传文件的功能进行适配. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战] ...
- 使用Fileupload完成文件的上传下载
目录 使用Fileupload完成文件的上传下载 为什么需要进行文件上传下载? 引入jar包 文件上传 注意事项 编写一个简单的文件上传jsp页面 编写Servlet Student类用于封装数据,后 ...
- 在Window的IIS中创建FTP的Site并用C#进行文件的上传下载
文件传输协议 (FTP) 是一个标准协议,可用来通过 Internet 将文件从一台计算机移到另一台计算机. 这些文件存储在运行 FTP 服务器软件的服务器计算机上. 然后,远程计算机可以使用 FTP ...
- 创建FTP的Site并用C#进行文件的上传下载
创建FTP的Site并用C#进行文件的上传下载 文件传输协议 (FTP) 是一个标准协议,可用来通过 Internet 将文件从一台计算机移到另一台计算机. 这些文件存储在运行 FTP 服务器软件的服 ...
- SocketIo+SpringMvc实现文件的上传下载
SocketIo+SpringMvc实现文件的上传下载 socketIo不仅可以用来做聊天工具,也可以实现局域网(当然你如果有外网也可用外网)内实现文件的上传和下载,下面是代码的效果演示: GIT地址 ...
随机推荐
- ASP.NET Core 浅析环境变量与配置的优先级
本文将简单介绍在 dotnet 6 下的 ASP.NET Core 里的环境变量当成配置的优先级行为.这部分内容在官方文档都有提到,只是我开始粗心没有看仔细,而踩到了坑,特意写篇博客记录一下 在 AS ...
- Total Commander 使用 mklink 建立文件夹链接 将 C 盘文件迁移到其他盘
在安装完成了 100000000 个软件之后,我 1T 的 C 盘的空间终于不足了,由于安装了大量的特别挑的不专业的软件,强行放在其他的盘将水土不服.于是在老师傅的指导下,我采用了 mklink 神奇 ...
- 开源相机管理库Aravis例程学习（四）——multiple-acquisition-signal
目录 简介 例程代码 函数说明 g_main_loop_new g_main_loop_run g_main_loop_quit g_signal_connect arv_stream_set_emi ...
- 深入浅出玩转fPGA-读书笔记
笔记1 关于异步复位同步释放的理解 先看代码: 其中有两个always语句,把2个触发器叠加,当按下复位信号rst_n是,两个触发器都复位(清零).当rst_n释放时,重点就来了,rst_n释放的时刻 ...
- 安装assimp失败
使用Cmake和Visual Studio编译assimp成功(包括Debug和Release),并且安装Release版本也成功,但安装debug版本失败,安装输出信息如下: 通过提示找到脚本文件, ...
- Ubuntu-kali配置动态ip（简单）
使用gedit文本编辑器打开网络接口配置文件 gedit /etc/network/interfaces 新增两行内容如下: auto eth0 iface eth0 inet dhcp 其意思为:网 ...
- 记录一次uniapp使用scrollview
在uni-app框架下,使用scroll-view进行下拉加载时,不要设置 scroll-top 或者 scroll-left 否则会出现,页面抖动的情况
- 2D空间中比较两三角形相交与包含
在处理UV重叠.CPU的ZFighting检测时会遇到2D空间中的三角形相交问题, 网上普遍是3D空间的相交解法,因此写本文研究下,不过虽然实现了需求, 但用的方法比较暴力. 效果如图: (鼠标拖动区 ...
- Clion代码自动格式化保存
目录 前言 使用外部工具Artistic Style Clion 插件配置 注意 前言 使用Clion的时候,可以自动格式化代码的操作. 使用外部工具Artistic Style 序号 名称 地址 1 ...
- 在Cocos2d中拖动组件并吸附到节点
最近在学习制作小游戏,要实现一个拖动吸附效果,这里简单实现一下 代码实现 定义节点和函数功能 在properties里新建一个对象,用来接收目标区域的节点 properties:{ sense: { ...