html5之文件操作
用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。
1、FileReader接口的方法
FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
| 方法名 | 参数 | 描述 |
|---|---|---|
| readAsBinaryString | file | 将文件读取为二进制编码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| abort | (none) | 终端读取操作 |
2、FileReader接口事件
FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
| 事件 | 描述 |
| onabort | 中断 |
| onerror | 出错 |
| onloadstart | 开始 |
| onprogress | 正在读取 |
| onload | 成功读取 |
| onloadend | 读取完成，无论成功失败 |
3、FileReader接口的使用
- <script type="text/javascript">
- var result=document.getElementById("result");
- var file=document.getElementById("file");
- //判断浏览器是否支持FileReader接口
- if(typeof FileReader == 'undefined'){
- result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";
- //使选择控件不可操作
- file.setAttribute("disabled","disabled");
- }
- function readAsDataURL(){
- //检验是否为图像文件
- var file = document.getElementById("file").files[0];
- if(!/image\/\w+/.test(file.type)){
- alert("看清楚，这个需要图片！");
- return false;
- }
- var reader = new FileReader();
- //将文件以Data URL形式读入页面
- reader.readAsDataURL(file);
- reader.onload=function(e){
- var result=document.getElementById("result");
- //显示文件
- result.innerHTML='<img src="' + this.result +'" alt="" />';
- }
- }
- function readAsBinaryString(){
- var file = document.getElementById("file").files[0];
- var reader = new FileReader();
- //将文件以二进制形式读入页面
- reader.readAsBinaryString(file);
- reader.onload=function(f){
- var result=document.getElementById("result");
- //显示文件
- result.innerHTML=this.result;
- }
- }
- function readAsText(){
- var file = document.getElementById("file").files[0];
- var reader = new FileReader();
- //将文件以文本形式读入页面
- reader.readAsText(file);
- reader.onload=function(f){
- var result=document.getElementById("result");
- //显示文件
- result.innerHTML=this.result;
- }
- }
- </script>
- <p>
- <label>请选择一个文件：</label>
- <input type="file" id="file" />
- <input type="button" value="读取图像" onclick="readAsDataURL()" />
- <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
- <input type="button" value="读取文本文件" onclick="readAsText()" />
- </p>
- <div id="result" name="result"></div>
我测试的
可以完整的显示出来图片，只需要将内容贴到任何地方都可以显示出来图片，很方便。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拖拽本地图片到页面指定元素内</title>
</head>
<body>
<input type="file" id="file" onchange="change(this)">
<div id="dropBox" style="float:left;width:400px;height:300px;margin:10px 0 0 0;border:1px solid #015EAC;color:#666;overflow:hidden;clear:left;font-size:12px;">拖拽图片到这里！</div>
<script type="text/javascript">
var oDropBox = document.getElementById('dropBox'),
oImgInfo = document.getElementById('imgInfo');
oDropBox.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
oDropBox.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
if (window.FileReader) {
var fileList = e.dataTransfer.files, //获取拖拽文件
fileType = fileList[0].type,
oImg = document.createElement('img'),
reader = new FileReader();
if (fileType.indexOf('image') == -1) {
alert('请拖拽图片~');
return;
}
reader.onload = function(e) {
oImg.src = this.result;
oDropBox.innerHTML = '';
oDropBox.appendChild(oImg);
oImgInfo.innerHTML = this.result;
}
reader.readAsDataURL(fileList[0])
} else {
alert("buzhichi");
}
}
function change(fileItem){
var oImg = document.createElement('img')
if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现
oFReader = new FileReader();
oFReader.readAsDataURL(fileItem.files[0]);
oFReader.onload = function (oFREvent) {oImg.src = oFREvent.target.result;};
}
else if (document.all) {//IE8-
fileItem.select();
var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
if (window.ie6) {
oImg.src = reallocalpath;
}//IE6浏览器设置img的src为本地路径可以直接显示图片
else {
//非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先
oImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
oImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片，要不会显示红xx
}
}
else if (fileItem.files) {//firefox6-
if (fileItem.files.item(0)) {
url = fileItem.files.item(0).getAsDataURL();
oImg.src = url;
}
}
oDropBox.innerHTML = '';
oDropBox.appendChild(oImg);
}
</script>
</body>
</html>
html5之文件操作的更多相关文章
- HTML5 本地文件操作之FileSystemAPI实例（四）
目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSyst ...
- HTML5 本地文件操作之FileSystemAPI实例（三）
文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFi ...
- HTML5 本地文件操作之FileSystemAPI实例（二）
文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...
- HTML5 本地文件操作之FileSystemAPI实例（一）
文件操作实例整理一 1.请求系统配额类型 console.info(window.TEMPORARY); //0 临时 console.info(window.PERSISTENT); //1 持久 ...
- HTML5 本地文件操作之FileSystemAPI整理（二）
一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
- HTML5 本地文件操作之FileSystemAPI整理（一）
一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口 方法: 1.requestQuota(type ...
- HTML5 本地文件操作之FileSystemAPI简介
一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...
- HTML5 之文件操作(file)
前言 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文本输入字段,用来输入文 ...
- [JS进阶] HTML5 之文件操作(file)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/oscar999/article/details/37499743 前言 在 HTML 文档中 < ...
随机推荐
- OpenCV实现灰度直方图和直方图拉伸
原文链接:http://blog.csdn.net/xiaowei_cqu/article/details/7600666 如有疑问或者版权问题,请移步原作者或者告知本人. 灰度直方图是数字图像中最简 ...
- inherit 关键字使得元素获取其父元素的计算值
它可以应用于任何CSS属性,包括CSS简写 all. 对于继承属性,inherit 关键字只是增强了属性的默认行为,只有在重载(overload)其它规则的时候被使用.对于非继承属性,inherit ...
- kvm迁移
一.迁移简介 迁移: 系统的迁移是指把源主机上的操作系统和应用程序移动到目的主机,并且能够在目的主机上正常运行.在没有虚拟机的时代,物理机之间的迁移依靠的是系统备份和恢复技术.在源主机上实时 ...
- 【剑指Offer】30、连续子数组的最大和
题目描述: HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是 ...
- 15.4 Task 异步匿名函数
Func<int, Task<int>> func = async x => { Console.WriteLine("starting x={0}" ...
- Java核心技术读书笔记02
第四章 对象和类 类之间的关系 最常见的三种关系 依赖("uses-a") Order依赖Account类看信息 聚合("has-a") Order包含多个It ...
- Git 基础教程 之 远程库更新到本地
PS:git remote -v 查看远程仓库 git diff temp 比较master 分支与temp的不同 如果分支没有合并到主分支上,用 git branch - ...
- Git 基础教程 之 删除文件
① 手动或命令 rm删除工作区的问价: git checkout -- readme.txt 可恢复 checkout 实际上是用版本库里的替换工作区的版本 ② 删除了工作区文 ...
- 【ABCD组】Scrum meeting 2
前言 第2次会议在6月14日由组长在教9 405召开. 主要对下一步的工作进行说明安排,时长90min. 主要内容 经会议讨论,由于一些对知识掌握的原因,决定放弃java语言实现系统,改用c#完成此系 ...
- phpcms v9 邓士鹏(石家庄职业技术学院)
头部标题.关键词.描述调用: <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title'] ...