HTML5 关于本地操作文件的方法
由于传统 b/s 开发出于安全性的考虑,浏览器对于本地文件的操作权限几乎没有,用户想要操作一个文件基本都是采用先上传到服务器,
再回显给浏览器供用户编辑,裁剪等的方法,这种方式虽然可行,但其对于服务器,对于用户体验,都不是很友好
下面笔者就给出 H5 JS 最新在本地操作文件的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件操作</title>
</head>
<body>
<div id="main">
<img id="img" src="" />
<input id="file" type="file" accept="image/*" />
</div>
<script type="text/javascript">
/**
* 将本地图片件转化为 img 标签可以识别的 src
* @param file 从 input[type=file] 表单中获取的文件对象
* @returns 可以直接作为 img 标签的 src 属性值的对象
*/
var fileToImgSrc = function (file) {
if (window.URL) return window.URL.createObjectURL(file);
if (window.windcreateObjectURL) return window.createObjectURL(file);
if (window.webkitURL) return window.webkitURL.createObjectURL(file);
}; /**
* 将本地文件转化为 base64 编码字符串
* @param file 从 input[type=file] 表单中获取的文件对象
* @param fn 回调方法,读取完成后执行
*/
var fileToBase64 = function (file, fn) {
var reader = new FileReader();
reader.onload = function () {
fn(reader.result);
};
reader.readAsDataURL(file);
} /**
* 将 base64 编码的字符串 转化为 blob 对象
* @param base64Str base64 编码的字符串
* @returns {Blob} 文件对象
*/
var base64ToBlob = function (base64Str) {
var base64StrArr = base64Str.split(",");
var byteArr = atob(base64StrArr[1]);
var lengths = byteArr.length;
var utf8Arr = new Uint8Array(lengths);
while (lengths--) utf8Arr[lengths] = byteArr.charCodeAt(lengths);
return new Blob([utf8Arr], { type: base64StrArr[0].split(/;|:/)[1] });
}; /**
* 由于使用了比较新的 API, 旧版浏览器可能会存在一定兼容性的问题,建议将浏览器更新到较为新的版本
* @type {HTMLElement}
*/
var inpout = document.getElementById("file");
var img = document.getElementById('img');
inpout.addEventListener("change", function (ev) {
var file = this.files[0]; // 获取 input 表单的文件对象
// img.src = fileToImgSrc(file); // 将图片回显
fileToBase64(file, function (base64Str) {
console.log(base64Str); // 读取文件为 base64 字符串
var blob = base64ToBlob(base64Str); // 再次转化为文件
img.src = fileToImgSrc(blob); // 再次回显
})
});
</script>
</body>
</html>
HTML5 关于本地操作文件的方法的更多相关文章
- easyui 加载本地json 文件的方法
easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...
- HTML5实现本地JSON文件的读写
参考: 使用HTML5来实现本地文件读取和写入 (FileReader读取json文件,FileSaver.js保存json文件) w3school <input>标签 FileRead ...
- 【转】Excel-VBA操作文件四大方法之三
三.利用FileSystemObject对象来处理文件 FileSystemObject对象模型,是微软提供的专门用来访问计算机文件系统的,具有大量的属性.方法和事件.其使用面向对象的“object. ...
- Windows编程中各种操作文件的方法
windows编程中文件操作有以下几种常见方法:1.C语言中文件操作.2.C++语言中的文件操作.3.Win32 API函数文件操作.4.MFC CFile类文件操作.5.MFC CFileDialo ...
- springboot访问服务器本地静态文件的方法
一.继承WebMvcConfigurerAdapter,重写addResourceHandlers,在registry里面配置访问路径和映射到的服务器本地路径. import org.springfr ...
- PHP中常用操作文件的方法
文件夹的创建: mkdir系统函数,第一个参数是路径,第二个参数是权限,第三个参数是是否递归创建,默认权限是0777最大权限,在windows下没有所谓的权限,在linux下可以设置权限,如果目录存在 ...
- Html5选择本地视频音频文件播放
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 解决ajax chrome禁止本地浏览时加载本地其他文件的方法
在chrome快捷键右键--属性 “ --allow-file-access-from-files ”,前面用空格隔开.然后应用--确定.
- C#操作文件夹及文件的方法的使用
本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内容 ...
随机推荐
- 学习笔记CB012: LSTM 简单实现、完整实现、torch、小说训练word2vec lstm机器人
真正掌握一种算法,最实际的方法,完全手写出来. LSTM(Long Short Tem Memory)特殊递归神经网络,神经元保存历史记忆,解决自然语言处理统计方法只能考虑最近n个词语而忽略更久前词语 ...
- XML基础学习
XML 信息传输工具 标签未被预定义 具有自我描述性 W3C的推荐标准 XML HTML的差异 XML:传输 存储数据 HTML:显示数据 树结构 <root> <child> ...
- 矩形覆盖(JAVA)
矩形覆盖 题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 思路:最初看到这题,只能通过画图归纳来寻找规律. ...
- Django学习笔记之验证和授权
验证和授权概述 Django有一个内置的授权系统.他用来处理用户.分组.权限以及基于cookie的会话系统.Django的授权系统包括验证和授权两个部分.验证是验证这个用户是否是他声称的人(比如用户名 ...
- Taro 常用 API
table th:first-of-type { width: 300px; } Taro 常用 API 说明 网址 Taro.getSystemInfoSync() 获取系统信息同步接口. http ...
- Linux之正则表达式2之()、[]、{}区别
正则表达式的() [] {} 有着不同的意思. () 是为了提取匹配字符串的,表达式中有几个()就有几个相应的匹配字符串 (\s*)表示连续空格的字符串 [] 是定义匹配的字符范围.比如[a-zA-Z ...
- MongoDB解压报错gzip: stdin: not in gzip format的解决方法
MongoDB解压报错gzip: stdin: not in gzip format的解决方法 在安装MongoDB时出现如下报错: [root@vm172--- mongodb]# tar -zxv ...
- 提取配置文件中无注释的内容方法--findstr
findstr /v /r # nginx.conf C:\Users\Liang>findstr /?在文件中寻找字符串. FINDSTR [/B] [/E] [/L] [/R] [/S] [ ...
- BT.656
转自http://www.cnblogs.com/s_agapo/archive/2012/04/08/2437775.html 凡是做模拟信号采集的,很少不涉及BT.656标准的,因为常见的模拟视频 ...
- Solr使用访问地址控制索引的,删除、创建
启动Solr,删除全部索引数据: http://localhost:8080/solr/update/?stream.body=<delete><query>*:*</q ...