js操作文件 HTML5版

js操作文件 HTML5版，有需要的朋友可以参考下。

<!DOCTYPE html>

<html>

<head>

	<title>JSFileReader</title>

	<meta charset="utf-8" >

</head>

<body>

	<input accept="image/*" type="file" name="fileImg" id="fileImg" />

	<input type="button" onclick="readAsDataURL()" value="readAsDataURL">

	<input type="button" onclick="readAsBinaryString()" value="readAsBinaryString"><br><br>

	<input accept="text/*" type="file" name="fileTxt" id="fileTxt" />

	<input type="button" onclick="readAsArrayBuffer()" value="readAsArrayBuffer">

	<input type="button" onclick="readAsText()" value="readAsText"><br><br>

	<input type="file" name="file" id="file" multiple />

	<input type="button" onclick="readAttr()" value="readAttr"><br><br>

	<input type="button" onclick="saveTXT()" value="saveTXT"><br><br>

	<div id="result"></div>

<script type="text/javascript">

	var imgs = document.getElementById('fileImg');

	var txts = document.getElementById('fileTxt');

	var files = document.getElementById('file');

	var result = document.getElementById('result');

	if (typeof FileReader == 'undefined') {

		img.disabled = true;

		txt.disabled = true;

		file.disabled = true;

		alert('您的浏览器太老了');

	}else {

		var reader = new FileReader();

	}

	function readAsDataURL(){

		img = imgs.files[0];

		if (typeof img == 'undefined') {alert('选择对应文件');return;}

		if (!/image\/\w+/.test(img.type)) {alert('not image');return;}

		reader.readAsDataURL(img);

		reader.onload = function (e){

			result.innerHTML += "<img src='"+this.result+"'' />";

		}

	}

	function readAsBinaryString(){

		img = imgs.files[0];

		if (typeof img == 'undefined') {alert('选择对应文件');return;}

		if (!/image\/\w+/.test(img.type)) {alert('not img');return;}

		reader.readAsBinaryString(img);

		reader.onload = function (e){

			result.innerHTML += this.result;

		}

	}

	function readAsArrayBuffer(){

		txt = txts.files[0];

		if (typeof txt == 'undefined') {alert('选择对应文件');return;}

		if (!/text\/\w+/.test(txt.type)) {alert('not txt');return;}

		reader.readAsArrayBuffer(txt);

		reader.onload = function (e){

			result.innerHTML += this.result.byteLength+'<br>'+ab2str(this.result);

		}

	}

	// ArrayBuffer转为字符串，参数为ArrayBuffer对象

	function ab2str(buf) {

		/*Int8Array：8位有符号整数，长度1个字节。

		Uint8Array：8位无符号整数，长度1个字节。

		Int16Array：16位有符号整数，长度2个字节。

		Uint16Array：16位无符号整数，长度2个字节。

		Int32Array：32位有符号整数，长度4个字节。

		Uint32Array：32位无符号整数，长度4个字节。

		Float32Array：32位浮点数，长度4个字节。

		Float64Array：64位浮点数，长度8个字节。*/

		return String.fromCharCode.apply(null, new Uint8Array(buf));

	}

	// 字符串转为ArrayBuffer对象，参数为字符串

	function str2ab(str) {

	    var buf = new ArrayBuffer(str.length*2); // 每个字符占用2个字节

	    var bufView = new Uint8Array(buf);

	    for (var i=0, strLen=str.length; i<strLen; i++) {

	         bufView[i] = str.charCodeAt(i);

	    }

	    return buf;

	}

	function readAsText(){

		txt = txts.files[0];

		if (typeof txt == 'undefined') {alert('选择对应文件');return;}

		if (!/text\/\w+/.test(txt.type)) {alert('not txt');return;}

		reader.readAsText(txt,'utf-8');

		reader.onloadstart = function (e){

			alert('开始读取...');

		}

		reader.onprogress = function (e){

			alert('读取中...');

			//reader.abort();

		}

		reader.onload = function (e){//载入成功

			result.innerHTML += this.result;

		}

		reader.onloadend = function (e){

			alert('载入完成即触发  不管成功与否');

		}

		reader.onerror = function (e){

			alert('读取出错时触发');

		}

		reader.onabort = function (e){

			alert('读取中断时触发');

		}

	}

	function readAttr(){

		img = imgs.files[0];

		txt = txts.files[0];

		if (typeof img == 'undefined' || typeof txt == 'undefined') {alert('选择对应文件');return;}

		for(i in img)

			result.innerHTML += i+"====>"+img[i]+"<br>";

		result.innerHTML += "<br>";

		for(i in txt)

			result.innerHTML += i+"====>"+txt[i]+"<br>";

		for (var i = 0; i < files.files.length; i++) {

			var multipleFile = file.files[i];

			if (typeof multipleFile == 'undefined') {alert('选择对应文件');return;}

			for(j in multipleFile)

				result.innerHTML += j+"====>"+multipleFile[j]+"<br>";

			result.innerHTML += "<br>";

		}

	}

	function saveTXT(){

		if (!result.innerHTML) {alert('没有数据 无需导出');return;}

		var URL = URL || webkitURL || window;

		var bb = new Blob([result.innerHTML],{ "type" : "text\/plain;charset=utf-8" }); // the blob

		saveAs(bb, 'saveTXT.txt');

	}

	function saveAs(blob, filename){

		var type = blob.type;

	    var force_saveable_type = 'application/octet-stream';

	    if (type && type != force_saveable_type) { // 强制下载，而非在浏览器中打开

	        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;

	        blob = slice.call(blob, 0, blob.size, force_saveable_type);

	    }

	    var url = URL.createObjectURL(blob);

	    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');//方法可创建带有指定命名空间的元素节点。

	    save_link.href = url;

	    save_link.download = filename;

	    var event = document.createEvent('MouseEvents');

	    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

	    save_link.dispatchEvent(event);

	    URL.revokeObjectURL(url);

	}

</script>

</body>

</html>

js操作文件 HTML5版的更多相关文章

JS操作文件
) ; ; fso ); f1.Close(); // 读取文件的内容. // Response.Write("Reading file <br>") ...
原生JS操作class 极致版
// 获取class function getClass(el) { return el.getAttribute('class') } // 设置class function setClass(el ...
HTML5 关于本地操作文件的方法
由于传统 b/s 开发出于安全性的考虑,浏览器对于本地文件的操作权限几乎没有,用户想要操作一个文件基本都是采用先上传到服务器, 再回显给浏览器供用户编辑,裁剪等的方法,这种方式虽然可行,但其对于服务器 ...
node.js 操作excel 表格与XML文件常用的npm
在日常工作中会经常用到把一些excel表格文件转化为json,xml,js等格式的文件,下面就是我在日常中用到的这些npm. 1.node-xlsx: node-xlsx可以把excel文件转化为上面 ...
js操作一般文件和csv文件
js操作一般文件和csv文件将文本文件读成字符串 <input type="file" id="upload"> document.getElem ...
js操作serviceWorker缓存静态文件
js操作serviceWorker缓存静态文件 serviceWorker的作用就是用来做离线应用的,在手机端程序中用的较多先看下效果 index.html <!DOCTYPE html> ...
开源作品-PHP写的JS和CSS文件压缩利器(单文件绿色版)-SuMinify_PHP_1_5
前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件. ...
JS读取文件,Javascript之文件操作 (IE)
一.功能实现核心:FileSystemObject 对象要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象. 二.FileSystemObject ...
Javascript 文件操作（整理版）
Javascript 文件操作一.功能实现核心:FileSystemObject 对象其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详细介绍 ...

随机推荐

WCF全局异常处理
在用wcf做为单纯的服务端的时候,发生错误是常有的事情,特别是在调用其他系统提供的接口的时候,发生的一些错误总是让人摸不着头脑,严重影响了错误的定位.做.net web开发的时候,我们可以在Globa ...
PTA 10-排序5 PAT Judge (25分)
题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/677 5-15 PAT Judge (25分) The ranklist of PA ...
【bzoj3696】化合物树形dp
题目描述首长NOI惨跪,于是去念文化课了.现在,他面对一道化学题.这题的来源是因为在一个奇怪的学校两个化竞党在玩一个奇怪的博弈论游戏.这个游戏很蛋疼,我相信你们也没有兴趣听.由于这个游戏涉及博弈论, ...
【bzoj4237】稻草人分治+单调栈+二分
题目描述 JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要满足以下条件: ...
【NOIP2014】伤感·伤感·伤感
Day <0 虽说初三的时候考过一次提高组,而且还考得不错,但自己还是挺看重这次NOIP的[你想想旁边两大神级别人物在死命刷题,蒟蒻怎敢颓废]于是切完所有复赛题后又做了好多好多次模拟赛,状态自己 ...
[BZOJ4992] [Usaco2017 Feb]Why Did the Cow Cross the Road（spfa）
传送门把每个点和曼哈顿距离距离它3步或1步的点连一条边,边权为3 * t + a[x][y] 因为,走3步,有可能是3步,也有可能是1步(其中一步拐了回来) 最后,把终点和曼哈顿距离距离它1步和2布 ...
Redis的持久化——RDB
前面说到redis的三大特性:缓存.分布式内存数据库.持久化,所以今天将为大家介绍redis的两种数据持久化技术RDB和AOF, 先介绍RDB吧. 一.RDB是什么? 1.RDB全称redis dat ...
mysql语句优化方案（网上流传）
关于mysql处理百万级以上的数据时如何提高其查询速度的方法最近一段时间由于工作需要,开始关注针对Mysql数据库的select查询语句的相关优化方法. 由于在参与的实际项目中发现当mysql表的数 ...
avi视频文件提取与合并
最近在做一个avi视频文件的提取与合并,花了几天熟悉avi文件格式.制作了一个提取与合并的动态库,不过仅限于提取视频,视频的合并还没添加一些额外判断,可能导致不同分辨率的视频文件合成后不能播放.欢迎大 ...
RabbitMQ 简介以及使用场景
目录一. RabbitMQ 简介二. RabbitMQ 使用场景 1. 解耦(为面向服务的架构(SOA)提供基本的最终一致性实现) 2. 异步提升效率 3. 流量削峰三. 引入消息队列的优缺点 ...

js操作文件 HTML5版

js操作文件 HTML5版的更多相关文章

随机推荐

热门专题