HTML5的File API读取文件信息
html结构:
<div id="fileImage"></div>
<input type="file" value="upload" id="fileInput">
<p id="fileInfo"></p>
css样式:
#fileImage{width: 300px;height: 300px; margin: 20px auto;background-repeat: no-repeat ;background-position: left top;background-size: contain; }
#fileInfo{border: 1px solid #eee;}
js代码:
var fileInput = document.getElementById("fileInput"),
fileImage = document.getElementById("fileImage"),
fileInfo = document.getElementById("fileInfo"); //监听change事件
fileInput.addEventListener('change',function(){
//清空预览区背景图片
fileImage.style.backgroundImage = '';
//检查文件是否选择
if(!fileInput.value){
fileInfo.innerHTML = "没有选择任何文件";
return;
} //获取file的引用
var file = fileInput.files[0]; //获取file信息
fileInfo.innerHTML = '文件'+file.name+'<br>'+
'大小'+file.size+'<br>'+
'修改'+file.lastModifiedDate+'<br>';
if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif'){
alert('不是有效的图片');
return;
} //读取文件
var reader = new FileReader();
reader.onload = function(e){
var data = e.target.result;
fileImage.style.backgroundImage = 'url('+data+')';
}
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
选择文件之后可以看到文件的名称、大小、修改的时间,也可以预览图片。以DataURL的形式读取到的文件是一个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...
,常用于设置图像。如果需要服务器端处理,把字符串base64,
后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。 以上是使用file API操作文件的例子,摘自廖老师的js教程。
file API借口总览
◆ FileList接口: 可以用来代表一组文件的JS对象,比如用户通过input[type="file"]元素选中的本地文件列表
◆ Blob接口: 用来代表一段二进制数据,并且允许我们通过JS对其数据以字节为单位进行“切割”
◆ File接口: 用来代步一个文件,是从Blob接口继承而来的,并在此基础上增加了诸如文件名、MIME类型之类的特性
◆ FileReader接口: 提供读取文件的方法和事件
FileList接口
- #FileList[index] // 得到第index个文件
Blob接口
- #Blob.size // 只读特性,数据的字节数
- #Blob.slice(start, length) // 将当前文件切割并将结果返回
File接口
- #File.size // 继承自Blob,意义同上
- #File.slice(start, length) // 继承自Blob,意义同上
- #File.name // 只读属性,文件名
- #File.type // 只读属性,文件的MIME类型
- #File.urn // 只读属性,代表该文件的URN,几乎用不到,暂且无视
FileReader方法
- #FileReader.readAsBinaryString(blob/file) // 以二进制格式读取文件内容
- #FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式读取文件内容,并且可以强制选择文件编码
- #FileReader.readAsDataURL(file) // 以DataURL格式读取文件内容
- #FileReader.abort() // 终止读取操作
FileReader事件
- #FileReader.onloadstart // 读取操作开始时触发
- #FileReader.onload // 读取操作成功时触发
- #FileReader.onloadend // 读取操作完成时触发(不论成功还是失败)
- #FileReader.onprogress // 读取操作过程中触发
- #FileReader.onabort // 读取操作被中断时触发
- #FileReader.onerror // 读取操作失败时触发
FileReader属性
- #FileReader.result // 读取的结果(二进制、文本或DataURL格式)
- #FileReader.readyState // 读取操作的状态(EMPTY、LOADING、DONE)
对FileAPI实践的三点注意
1. 由于规范尚未截稿,#File.urn尚存较大变数,webkit并未实现此特性
2. #Blob.slice在webkit内核中加入了前缀,即#Blob.webkitSlice,且第二个参数不是“length”,而是“end”,话句话说,上面的示例二应改为file.webkitSlice(3, size)才能生效
3. 规范中还明确规定了各种出错处理和异常处理,这些内容是同样重要的:不论对于一套完备的规范,还是对于一个健壮的程序而言 。
HTML5的File API读取文件信息的更多相关文章
- HTML5 file api读取文件的MD5码工具
1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...
- File API 读取文件小结
简单地说,File API只规定怎样从硬盘上提取文件,然后交给在网页中运行的JavaScript代码. 与以往文件上传不一样,File API不是为了向服务器提交文件设计的. 关于File API不能 ...
- 使用 JavaScript File API 实现文件上传
概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- Java8 新API读取文件内容
import java.io.IOException;import java.nio.charset.Charset;import java.nio.file.Files;import java.ni ...
- linux 读取文件信息并且输出
版权为个人所有,欢迎转载如转载请说明出处.(东北大亨) http://www.cnblogs.com/northeastTycoon/p/5513231.html 以下为读取文件信息做输出操作. 1. ...
- File API 读取上传的文件
1, 在html 文档中,<input type="file"> 我们可以选择文件进行上传,但这时只能上传一个文件.如果加上multiple 属性,可以上传多个文件,上 ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
- html5 文件系统File API
前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖 ...
随机推荐
- spring.net 框架分析(三)ContextRegistry.GetContext()
我们通过ContextRegistry.GetContext()建立了一个IApplicationContext得实例,那么这个实例具体是怎么建立的了. 我们来分析一下容器实例建立的过程: 我们在配置 ...
- 20145215&20145307《信息安全系统设计基础》实验五 网络通信
小组成员:20145215卢肖明.20145307陈俊达 实验报告链接:信息安全系统设计基础--实验五实验报告
- kubernetes 1.4.5集群部署
2016/11/16 23:39:58 环境: centos7 [fu@centos server]$ uname -a Linux centos 3.10.0-327.el7.x86_64 #1 S ...
- vim修改文字编码
在Vim中查看文件编码 :set fileencoding 即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决 用Vim查看文件乱码的问题,那么在~/.vimrc 文件中添加以下内容: ...
- sstream
sstream用法 #include<iostream> #include<sstream> #include<string> using namespace st ...
- BZOJ 1221: [HNOI2001] 软件开发
1221: [HNOI2001] 软件开发 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1428 Solved: 791[Submit][Stat ...
- xp 下查看进程指令
xp 下快速查看进程及关联 exe 的指令,刚发现,还没有测试 win7 和 win10 支持不支持. wmic process where creationclassname="win32 ...
- Ubuntu安装RobotFramework
安装Python Ubuntu默认已安装 安装pip wget https://bootstrap.pypa.io/get-pip.py python get-pip.py 安装RobotFramew ...
- 二、基于hadoop的nginx访问日志分析---计算日pv
代码: # pv_day.py#!/usr/bin/env python # coding=utf-8 from mrjob.job import MRJob from nginx_accesslog ...
- 各个浏览器显示版本(IE,火狐)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...