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 文档中 < ...
随机推荐
- 【Oracle】to_char技巧
Select to_char(sysdate,'ss') from dual; 取当前时间秒部分 Select to_char(sysdate,'mi') from dual; 取 ...
- oracle 命令记录
监听程序启动停止查看名利: 1.切换到oracle用户:su - oracle 2.查看监听状态:lsnrctl status 3.停止监听:lsnrctl stop 4.启动监听:lsnrctl s ...
- asp.net 后台注册脚本
string myScript = "function ShowPanel() { $('.nav a[href=\"#" + PanelType.wenben.ToSt ...
- dubbo之分组聚合
按组合并返回结果 ,比如菜单服务,接口一样,但有多种实现,用group区分,现在消费方需从每种group中调用一次返回结果,合并结果返回,这样就可以实现聚合菜单项. 相关代码可以参考 dubbo 项目 ...
- VS2013(Win10X64)-配置编译Caffe
主要看这篇文章,有点小瑕疵,瑕不掩瑜.参考链接:http://www.bubuko.com/infodetail-902302.html 文中红色标记为文章小瑕疵的地方,在此文中标记出来,做为修改对上 ...
- C# MVC 延时
[System.Runtime.InteropServices.DllImport("kernel32.dll")] static extern uint GetTickCount ...
- TensorFlow的序列模型代码解释（RNN、LSTM）---笔记（16）
1.学习单步的RNN:RNNCell.BasicRNNCell.BasicLSTMCell.LSTMCell.GRUCell (1)RNNCell 如果要学习TensorFlow中的RNN,第一站应该 ...
- P1125 笨小猴
P1125 笨小猴 标签:NOIp提高组 2008 云端 难度:普及- 时空限制:1s / 128MB 题目描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证 ...
- codevs 2602 最短路径问题——良心题解
2602 最短路径问题 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 平面上有n个点(n<=100),每个点的坐标均在- ...
- Modbus串行通信
一.Modbus通信协议简介 1. Modbus协议 Modbus 是一个请求/应答协议,并且提供功能码规定的服务.Modbu协议是 OSI 模型第 7 层上的应用层报文传输协议. MODBUS协议支 ...