`
lucifinilhades
  • 浏览: 86598 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML5 文件API

HTML5FileListFileReaderBlob 
阅读更多

在HTML5中，提供了一个关于文件操作的文件API，通过使用这个接口，对于从Web页面上访问本地文件系统的相关处理将会变得十分简单。

FileList对象与file对象

FileList对象表示用户选择的文件列表。在HTML5中，通过在file控件中添加multiple属性，可以使用控件内一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户选择的所有文件。file对象具有两个属性：name属性表示文件夹名（不包含路径）；lastModifiedDate属性表示文件的最后修改日期。

Blob对象

Blob表示二进制原始数据，它提供一个slice方法，可以通过该方法访问到字节内部的原始数据块。事实上，file对象也是继承了这个Blob对象。

Blob对象有两个属性：size属性表示一个Blob对象的字节长度；type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。

另外，HTML5中已经对file控件添加了accept属性，该属性让file控件只能打官腔某种类型的文件，该属性的使用方法如下：

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

示例1

为了方便，给jQuery提供访问FileList对象的功能，现扩展如下：

jQuery.fn.files = function() {
	return this[0].files;
};

示例所用HTML页面如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>文件API</title>
    <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="../js/fileReader.js"></script>
  </head>
  <body>
    <header>
    	<h1>文件API示例</h1>
    </header>
    <section>
    	<form id="filelist_sample" name="filelist_sample">
			<label for="selectFiles">请选择文件：</label>
			<input type="file" name="selectFiles" id="selectFiles" multiple="multiple"/>
			<button type="button" id="showInfoBtn" name="showInfoBtn">显示文件信息</button><br/>
			<button type="button" id="txtBtn" name="txtBtn">测试readAsText</button>
			<button type="button" id="binBtn" name="binBtn">测试readAsBinaryString</button>
			<button type="button" id="urlBtn" name="urlBtn">测试readAsDataURL</button>
		</form>
		<div id="fileContent"></div>
		<footer>
			<table id="info">
				<caption>文件信息</caption>
				<thead>
					<tr>
						<th>ID</th>
						<th>文件名</th>
						<th>文件类型</th>
						<th>文件大小（KB）</th>
						<th>最后修改日期</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th>合计：</th>
						<th><meter id="count" value="0" min="0" max="10">0</meter></th>
						<th></th>
						<th><meter id="sum" value="0" min="0" >0</meter></th>
						<th><button type="button" id="clearBtn">清除信息</button></th>
					</tr>
				</tfoot>
			</table>
		</footer>
    </section>
    <footer>
    	<div id="console"></div>
    </footer>
  </body>
</html>

“显示文件信息”按钮的click事件代码如下：

$(function() {
	$("#showInfoBtn").click(function(event) {
		$("#clearBtn").click();
		var fileObjs = $("#selectFiles").files();
		var sum = 0, count = 1;
		var tbody = $("<tbody>");
		for ( var index = 0; index < fileObjs.length; index++) {
			$("<tr>").append($("<td>").append("<meter>").val(count).text(count))
				.append($("<td>").text(fileObjs[index].name))
				.append($("<td>").text(fileObjs[index].type))
				.append($("<td>").append($("<meter>").val(fileObjs[index].size).text(fileObjs[index].size / 1024)))
				.append($("<td>").text(fileObjs[index].lastModifiedDate)).appendTo(tbody);
			sum += fileObjs[index].size;
			count++;
		}
		$("td>meter, #sum").attr("max", 5 * 1024 * 1024);
		$("#info>thead").after(tbody);
		$("#count").attr("max", "10").val(fileObjs.length).text(fileObjs.length);
		$("#sum").val(sum).text(sum / 1024);
	});
});

“清除信息”按钮的click事件代码如下：

$(function() {
	$("#clearBtn").click(function(event) {
		$("#info>tbody, #fileContent, #console").empty();
		$("#count, #sum").val(0).text(0);
	});
});

FileReader接口

FileReader接口主要用来把文件读入内在，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。如下代码可以检测浏览器是否支持此接口：

if(typeof FileReader == "undefined") {
    alert("您的浏览器未实现FileReader接口！");
}

FileReader接口的方法

FileReader接口拥有4个方法，其中3个用以读取文件，另一个用来将读取过程中断。注意：无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

  • readAsText(file[, encoding])：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为UTF-8。该方法将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
  • readAsBinaryString(file)：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
  • readAsDataURL(file)：该方法将文件读取为一串Data URL字符串，该方法事实上是将小文件以一种特殊格式的URL地址形式直接读入页面。这里的小文件通常是指图像与html等格式的文件。
  • abort()：中断读取操作。

FileReader接口的事件

除了上述方法之外，FileReader接口还包含了一套完整的事件模型，用于捕获读取文件时的状态，这些事件如下：

  1. onloadstart：数据读取开始时触发。
  2. onprogress：数据读取中。
  3. onload：数据读取成功完成时触发。
  4. onloadend：数据读取完成时触发，无论成功或失败。
  5. onabort：数据读取中断时触发。
  6. onerror：数据读取出错时触发。

我们需要编写的代码主要都是在onprogress事件中，例如，可以用HTML5中的新增元素progress来显示大文件的读取完成百分比。

示例2

为方便使用FileReader接口，给jQuery增加几个函数如下：

var getFileReader = function(handler) {
	var reader = new FileReader();
	reader.onloadstart = handler.loadStart;
	reader.onprogress = handler.progress;
	reader.onload = handler.load;
	reader.onloadend = handler.loadEnd;
	reader.onabort = handler.abort;
	reader.onerror = handler.error;
	return reader;
};

jQuery.fn.readAsText = function(handler, encoding) {
	if (typeof encoding == "undefined") {
		encoding = "UTF-8";
	}
	var files = this.files();
	var reader = null;
	for ( var i = 0; i < files.length; i++) {
		reader = getFileReader(handler);
		reader.readAsText(files[i], encoding);
	}
	return this;
};

jQuery.fn.readAsBinaryString = function(handler) {
	var files = this.files();
	var reader = null;
	for ( var i = 0; i < files.length; i++) {
		reader = getFileReader(handler);
		reader.readAsBinaryString(files[i]);
	}
	return this;
};

jQuery.fn.readAsDataURL = function(handler) {
	var files = this.files();
	var reader = null;
	var imageHandler = function(event) {
		$("<img>").attr("src", event.target.result).appendTo("#fileContent");
	};
	for ( var i = 0; i < files.length; i++) {
		reader = getFileReader(handler);
		if (!/image\/\w+/.test(files[i].type)) {
			reader.readAsDataURL(files[i]);
		} else {
			reader.onload = imageHandler;
			reader.readAsDataURL(files[i]);
		}
	}
	return this;
};

给上述函数传入的事件处理器函数代码如下：

$(function() {
	var createTag = function(txt) {
		$("#console").append($("<span>").text(txt).after("<br/>"));
	};

	var handler = {
		load : function(event) {
			createTag("this is FileReader's onload event.");
			$("<p>").append(event.target.result).appendTo("#fileContent");
		},
		loadStart : function(event) {
			createTag("this is FileReader's onloadstart event.");
		},
		loadEnd : function(event) {
			createTag("this is FileReader's onloadend event.");
		},
		abort : function(event) {
			createTag("this is FileReader's onabort event.");
		},
		error : function(event) {
			createTag("this is FileReader's onerror event.");
		},
		progress : function(event) {
			createTag("this is FileReader's onprogress event.");
		}
	};
});

最后，三个按钮的click事件代码如下：

$(function() {
	$("#txtBtn").click(function(event) {
		$("#selectFiles").readAsText(handler);
	});

	$("#binBtn").click(function(event) {
		$("#selectFiles").readAsBinaryString(handler);
	});

	$("#urlBtn").click(function(event) {
		$("#selectFiles").readAsDataURL(handler);
	});
});
 
分享到：
| DWR的engine.js引擎属性及调用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON，KML，GPX ) 加载为层.zip

    Leaflet.FileLayer, 使用HTML5文件API将文件本地( GeoJSON，KML，GPX ) 加载为层 Leaflet.FileLayer使用 API 将本地文件加载到映射中，不需要服务器调用就可以加载 ！简单的地图控件用户可以在本地浏览文件它被本地...

    HTML5文件API：功能和兼容性

    HTML5文件API是Web开发中的一个关键特性，它允许开发者在浏览器环境中处理本地文件，而无需服务器的介入。这一功能极大地扩展了Web应用的能力，使得用户可以上传、读取、写入甚至修改本地文件，提高了交互性和用户...

    filerun.js:一个通过 HTML5 文件 API 提供可靠上传的 JavaScript 库

    除了 HTML5 文件 API 之外，filerun.js 没有任何外部依赖项。 特征 多个文件同时上传 可恢复上传的分块传输 中断时自动重试 可以暂停上传队列，甚至可以暂停单个文件 浏览器内存占用低，允许在同一会话中上传数百个...

    HTML5 api 调用示例

    HTML5 API调用示例是现代网页开发中的关键部分，它极大地扩展了Web应用程序的功能，使其可以实现更多原生应用的特性。W3C（万维网联盟）是定义HTML5标准的权威组织，它的API规范为开发者提供了丰富的工具集，以创建...

    Html5 file_api

    HTML5 文件API 文件上传 支持拖拽的文件上传

    基于html5的文件上传工具，支持对文件类型，大小，以及针对图片的尺寸进行校验.zip

    在描述中提到的“支持对文件类型，大小，以及针对图片的尺寸进行校验”，这是HTML5文件API的关键应用。开发者可以利用File API来获取文件的相关信息，如文件类型、大小等，然后根据业务需求进行校验，确保上传的文件...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    标题中的"twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_"似乎是指一个基于HTML5的Twaver版本5.9.0的应用程序接口（API）文档。Twaver是一个强大的数据可视化和网络建模工具，广泛应用于网络拓扑、流程图、组织...

    ch06HTML5媒体API项目.rar

    本次实验主要包含了两个基于HTML5媒体API的应用设计实例，一是基于HTML5音频API的音乐播放器的设计与实现，二是基于HTML5视频API的在线教学视频的设计与实现。要求做基于HTML5音频API的音乐播放器的设计与实现，基于...

    html5_API文档

    6. Drag and Drop：HTML5的拖放API允许用户在网页上直接拖放元素，提高了交互性，适用于文件上传、内容排序等功能。 7. Web Workers：为了解决JavaScript单线程执行导致的性能问题，HTML5引入了Web Workers，它们在...

    usefs:一个简单流畅的 HTML5 文件访问 API，带有 Promise

    HTML5 文件 API 是一种异步 API，用于访问本地文件，并基于回调。 由于其嵌套性质，API 的使用很快就因为噩梦。 Usefs 可以轻松地将 100 行 HTML5 File API 代码变成一行代码。 它是基于 Apache Cordova/PhoneGap ...

    LineReader:使用 HTML5 FileReader API 在浏览器中逐行读取文件

    行阅读器使用 HTML5 文件 API 逐行读取文件。用法用户选择文件后： // Grab a file referencevar file = document . getElementById ( 'my-file-input' ) . files [ 0 ] ;// Create a new instance of the ...

    Webapi 文件上传

    在前端，可以使用HTML5的`FormData`对象和`XMLHttpRequest`或`fetch` API来发送文件。下面是一个简单的JavaScript示例： ```html 上传 document.getElementById('uploadForm').addEventListener('submit', ...

    .NET webapi实现文件上传功能

    本文将深入探讨如何在WebAPI中实现文件上传功能，并介绍如何在MVC应用程序中调用这个API。 一、WebAPI中的文件上传 1. **配置路由**：首先，我们需要在WebAPI的`WebApiConfig.cs`文件中设置允许接收多部分/表单...

    调用WebApi接口上传文件

    总结，通过.NET MVC调用WebApi接口进行文件上传涉及客户端HTML表单的创建、服务器端MVC控制器和WebApi控制器的配置以及文件的接收和处理。在实际项目中，还要注意性能优化、错误处理和安全性检查，以提供稳定可靠的...

    关于HTML5+ API plusready的兼容问题

    在5+ Runtime环境中，通常情况下需要html页面解析完成后才会注入5+ API，执行的顺序为： 1. 加载html页面 2. 解析html页面（下载script/link等节点引用的资源，如js/css文件） 3. 触发DOMContentLoaded事件 4. 注入5...

    archunit-junit5-api-0.14.1-API文档-中文版.zip

    赠送jar包：archunit-junit5-api-0.14.1.jar；...使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。

    html5关于文件处理的api介绍

    1. **FileList对象**：FileList是一个文件对象的集合，通常由HTML文件输入元素`&lt;input type="file"&gt;`生成。在HTML4中，用户只能选择一个文件，但在HTML5中，通过添加`multiple`属性，用户可以选择多个文件。每个文件...

    javascript 读取文本文件.rar

    4. HTML5 文件API：除了FileReader外，HTML5引入了更多的文件操作API，如FileList（表示一组File对象）和FormData（用于发送键值对数据，常用于AJAX请求）。这些API使得在JavaScript中处理文件变得更加灵活。 5. ...

    HTML5演示+Canvas_2D_API+css3.0API

    在给定的压缩包文件中，我们关注的重点是HTML5的Canvas 2D API和CSS3.0 API。 Canvas 2D API是HTML5的一个重要组成部分，它提供了一个在网页上绘制图形、图像、文字等元素的JavaScript接口。通过这个API，开发者...

    html5文件上传中文文档

    在探讨HTML5文件上传中文文档时，我们将重点介绍HTML5提供的文件操作API，这是一个强大的功能集合，使得在浏览器端操作文件变得更加方便和安全。文档中提到了几个关键的概念和API，包括File API、FileReader API、...

Magicbox
Global site tag (gtag.js) - Google Analytics