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地址 ...
随机推荐
- 实用的 Bash 快捷键
前端也有需要运维的时候,这时我们不可避免需要登录 Linux 服务器,并在 Bash 终端输入一些命令,当需要对输入的命令进行一些操作时,比如快速移动光标位置或快速删除字符,如果只会用方向键和退格键, ...
- WPF 用到的触摸的 COM 接口
本文记录 WPF 用到的触摸的 COM 接口 消息 用到了 WM_TABLET_ADDED 和 WM_TABLET_DELETED 消息 使用的代码是 src\Microsoft.DotNet.Wpf ...
- Winform程序使用app.minifest清单禁止高DPI无法失效问题
问题:Winform程序使用app.minifest清单禁止高DPI无法失效问题 摘要:因为笔记本基本都会有DPI放大,所以目前程序需要嵌入清单,并将其高DPI支持给禁止掉. 环境搭建:Winform ...
- 详解csrf（跨站请求伪造）
1.什么是csrf (csrf攻击原理)? 用户正常访问A网站,A网站设置cookie被用户浏览器保存 用户不关闭浏览器,直接访问恶意网站,该恶意网站内隐藏式内嵌了A网站接口的请求链接 触发该请求链接 ...
- JUC并发编程学习笔记（一）认知进程和线程
进程和线程 进程 一个程序,如QQ.exe,是程序的集合 一个进程往往可以包含多个线程,至少包含一个 java默认有两个线程,GC垃圾回收线程和Main线程 线程:一个进程中的各个功能 java无法真 ...
- ajax递归发送请求
简介 大家都知道浏览器在处理http网络请求的时候,不同的浏览器会有不一样的并发限制,下表是一些主流浏览器对 HTTP 1.1 和 HTTP 1.0 的最大并发连接数目: Browser HTTP/1 ...
- uni-app 安卓和IOS更新方案
一.安卓平台 整包更新(apk),即常规的整个App安装包重新下载安装. 资源热更新(wgt),即App并重新安装,里面的js等前端代码进行更新. Android App,可以直接下载新的apk,只要 ...
- 比Selenium更优秀的playwright介绍与未来展望
Playwright是微软开发的,专门为满足端到端测试需求而创建的.Playwright支持包括Chromium.WebKit和Firefox在内的所有现代渲染引擎.在Windows.Linux和ma ...
- 自定义Naive UI的数据表格Data Table中按钮Button图标
在Naive UI官网中详细介绍了[数据表格 Data Table](数据表格 Data Table - Naive UI)的使用方式 { title: "Action", key ...
- centos7中输入ifconfig 没有IP地址
vmware安装的centos7中没有出现eth0网卡,也没有ip,不能上网,输入ifconfig后如下图 解决办法 1.编辑网卡的配置文件 vi /etc/sysconfig/network-scr ...