JS实现将文件和base64的相互转换

1. JS将文件转成base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS将文件转成base64</title><style></style>
</head>
<body><input type="file" id="fielinput" /><script>window.onload = function () {// 获取文件domvar input = document.getElementById("fielinput");// 判断该浏览器是否支持FileReaderif (typeof (FileReader) === 'undefined') {console.log("你的浏览器不支持 FileReader");input.setAttribute('disabled', 'disabled');} else {// 为file添加事件监听input.addEventListener('change', parseFileToBase64, false);}}// 获取文件对象并转换成base64function parseFileToBase64() {// 获取到文件对象var file = this.files[0];// 获取FileReader实例var reader = new FileReader();// 将文件加载进入reader.readAsDataURL(file);reader.onload = function (e) { // 转换完成输出该文件base64编码console.log(this.result);}}</script>
</body>
</html>

2. JS将base64转成文件，并进行下载获取

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS将base64转换成文件并下载获取</title>
<style>
</style>
<script>function dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });}function downloadFile(url,name='文件默认名'){var a = document.createElement("a")a.setAttribute("href",url)a.setAttribute("download",name)a.setAttribute("target","_blank")let clickEvent = document.createEvent("MouseEvents");clickEvent.initEvent("click", true, true);  a.dispatchEvent(clickEvent);}function downloadFileByBase64(base64,name){var myBlob = dataURLtoBlob(base64)var myUrl = URL.createObjectURL(myBlob)downloadFile(myUrl,name)}var yourBase64 = '输入文件base64编码'var youFileName = '输入你的文件名'downloadFileByBase64(yourBase64, youFileName)
</script>
</head>
<body>
</body>
</html>

如果需要将整个文件夹全部转换成base64，可以将该文件夹压缩，然后按上述方法将该压缩文件转换成base64，将该base64转成压缩文件时，注意它的名称定义，应定义成 ***.zip。同理你若转换的是txt文件，那名称定义时应定义为 ***.txt。所以你将什么类型的文件转成base64，那么你将该base64转成文件时，名称的后缀名要保持不变。

JS实现将文件和base64的相互转换相关推荐

JS 浏览器中文件转 base64 编码，生成 base64 代码
JS 浏览器中文件转 base64 编码,生成 base64 代码 JS 中将文件转 base 64 只需要 FileReader 的 readAsDataURL(文件) 方法即可 let file ...
JS上传文件（base64字符串和二进制文件流）
①以base64字符串上传(使用FileReader对象获取文件的base64字符串) FileReader参考文档: FileReader - Web API 接口参考 | MDN FileRead ...
使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）
1.插件下载地址:https://mozilla.github.io/pdf.js/ 下载后解压pdfjs-1.10.88-dist.zip文件后得到: 2.把pdfjs-1.10.88-dist放到 ...
通过文件url地址获取base64；通过图片url地址获取base64；js获取文件的base64
本篇是通过url地址获取文件的base64 如果想要通过File文件获取base64查看这篇以下代码可直接复制使用!注意第9行的图片地址更改下 <template><div cla ...
html音频base64编码,录音文件与Base64编码相互转换的方法
前言最近有几个朋友一直在问语音文件怎么转base64字符串进行发送上传,base64字符串又如何转成文件,论坛中已经有多篇问题的帖子有介绍,这里只是稍微整理,方便大家可以更加方便的使用,首先看效果: ...
录音文件与Base64编码相互转换的方法
http://ask.dcloud.net.cn/article/841?item_id=10780 前言最近有几个朋友一直在问语音文件怎么转base64字符串进行发送上传,base64字符串又如何 ...
JS学习--用JS读取本地文件
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
js node.js读取excel文件返回为json文本
node-xlsx: 基于Node.js解析excel文件数据及生成excel文件:只支持xlsx xlsx: 基于Node.js解析excel文件数据及生成excel文件:只支持xlsx excel ...
Java微信浏览器上传文件使用Base64方法（增加压缩上传方法）
如果要兼容微信端的浏览器,需要将图片转化成Base64这种格式后,并传给服务器进行处理.如要注意一下几个方面. 1.只允许拍照的图片上传. <input ...
img图片的预览和下载（iframe基本使用），图片转file格式，file文件转base64格式，base64的编码和解码
目录一.根据后端接口返回的URL下载和预览图片 1.调用下载图片函数实现下载图片 2.弹出另一个页面,实现预览图片. 3.不弹出另一个页面,实现下载/预览图片(iframe方式) 4.动态创建ifr ...

JS实现将文件和base64的相互转换

JS实现将文件和base64的相互转换相关推荐

最新文章

热门文章