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 文档中 < ...
随机推荐
- 通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能
文字直播是满足一些观看视频直播而条件不足的球迷所设定的比赛直播方式,例如在长途车上为了能够了解比赛的实时赛况但又限于流量和网速等问题,就出现了文字直播的方式.无论是拥有无线上网卡的笔记本电脑或者手机等 ...
- C#中SetWindowPos函数详解
[DllImport("user32.dll")] private static extern bool SetWindowPos(IntPtr hWnd, IntPtr hWnd ...
- QS之force(1)
force This command allows you to apply stimulus interactively to VHDL signals(not variables), Verilo ...
- I2C controller core之Bit controller(04)
4) detect start/stop condition START- falling edge on SDA while SCL is high; STOP - rising edge on ...
- css3基础篇二
CSS3 边框 border-radius box-shadow border-image(ie不支持) 语法 border-radius: 1-4 length|% / 1-4 length|%; ...
- 08--MOOC--C/C++ 根据年月日计算星期几
计算任何一天是星期几的几种算法 一:常用公式 W = [Y-1] + [(Y-1)/4] - [(Y-1)/100] + [(Y-1)/400] + D Y是年份数,D是这一天在这一年中的累积天数,也 ...
- HDU_1517_博弈（巧妙规律）
A Multiplication Game Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...
- Nginx服务的地址重写
调整Nginx服务器配置,实现: 1.所有访问a.html的请求,重定向到b.html; 2.所有访问Nginx服务器(192.168.4.1)的请求重定向至www.baidu.com: 3.所有访问 ...
- 递归、作用域、生命周期（day09）
数组可以作为形式参数使用 数组做形式参数的时候真正的形式参数并 不是数组而是一个可以作为数组使用的 变量 数组形式参数里包含的存储区都不是被调用 函数提供的 声明数组形式参数的时候可以省略中括号 里的 ...
- 如何制作一个类似jquery插件的vue插件
vue拿来写插件,会不会太那啥? 请跟我念,"不会,符合业务需求才是你的老板最想要的." 如何封装一个可以全局调用的vue插件 其原理其实相当简单,通过new Vue(vueCom ...