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 文档中 < ...
随机推荐
- avaScript中变量的声明和赋值
变量是指程序中一个已经命名的存储单元,它的主要作用就是为数据操作提供存放信息的容器.变量是相对常量而言的.常量是一个不会改变的固定值,而变量的值可能会随着程序的执行而改变.变量有两个基本特征,即变量名 ...
- trait 和abstract的区别在哪里
无法在一个class上extend多个abstract class,但是你可以use多个trait abstract class是在类型系统上做文章,trait片段是mixin 类型约束 代码复用 c ...
- js 获取属性名称,再根据这个属性名获取值
if (result.success) { var obj = JSON.parse(result.data); var sltObj = document.getElementById(" ...
- eslint推荐编码规范和airbnb推荐编码规范
Eslint规范 for 循环禁止使用无限循环(这个非默认推荐) // bad for (var i = 0; i < 10; i--) { } for (var i = 10; i >= ...
- java HttpURLConnection 登录网站 完整代码
import java.io.*; import java.util.*; import java.net.*; public class WebTest { public static void m ...
- javaee utf-8文件的转换
package Zy; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.Fil ...
- 51nod1079 中国剩余定理【数论】
一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K % 2 = 1, K % 3 = 2, K % 5 = 3.符合条件的最小的K = 23. Input 第1行:1个数N表 ...
- [luogu 4886] 快递员
传送门 Solution 虽然不是点分治但用类似点分治的方法不断接近正确结果 Code // luogu-judger-enable-o2 #include <cstdio> #inclu ...
- Linux 中，基础命令 command not found...问题
linux中出现基本命令找不到的问题,经过查找发现是/etc/profile文件出现了问题,解决方案如下: 问题详细: [root@master ~]# ll bash: ls: command no ...
- Silverlight之我见——制作星星闪烁动画
圣诞节来了,无聊,做点东西纪念一下. 原理很简单,生成1000个圆,从随机数来布置它们的位置,通过动画来处理它们的透明度,动画时长也是随机生成. 1.创建图形数组并设置背景透明,渐变笔触,大小等,而后 ...