javaScript 通过flie API读取本地文件
File API是HTML5新增内容,依靠file和FileReader,这两个对象完成,代码如下:
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileInput.files[0];
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
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; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
javaScript 通过flie API读取本地文件的更多相关文章
- Javascript写入txt和读取txt文件的方法
文章主要介绍了Javascript写入txt和读取txt文件的方法,需要的朋友可以参考下1. 写入 FileSystemObject可以将文件翻译成文件流. 第一步: 例: 复制代码 代码如下: Va ...
- .NET 读取本地文件绑定到GridViewRow
wjgl.aspx.cs: using System; using System.Collections; using System.Configuration; using System.Data; ...
- H5读取本地文件操作
H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...
- javascript 学习笔记 -- js获取本地文件信息
JavaScript是跑在浏览器中,所以对于JavaScript读取本地文件不想c++ 和 java那样easy.网上有很多关于读取本地文件的方法,许多是用ActiveXObject控件.Active ...
- 前台JS(type=‘file’)读取本地文件的内容,兼容各种浏览器
[自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文 http://blog.cs ...
- 手工创建tomcat应用,以及实现js读取本地文件内容
手工创建tomcat应用: 1.在webapps下面新建应用目录文件夹 2.在文件夹下创建或是从其他应用中复制:META-INF,WEB-INF这两个文件夹, 其中META-INF清空里面,WEB-I ...
- 【转】flash air中读取本地文件的三种方法
actionscript中读取本地文件操作有两种代码如下 1.使用File和FileStream两个类,FileStream负责读取数据的所以操作:(同步操作) var stream:FileStre ...
- python 读取本地文件批量插入mysql
Uin_phone.txt 本地文件内容 有1000条,这里只是展示前几条,供参考 133584752 133584759 133584764 133584773 133584775 13358477 ...
- FileReader读取本地文件
FileReader是一种异步读取文件机制,结合input:file可以很方便的读取本地文件. 一.input:type[file] file类型的input会渲染为一个按钮和一段文字.点击按钮可打开 ...
随机推荐
- LinkedList 注意事项
public E getFirst() 返回此列表的第一个元素. public E getLast() 返回此列表的最后一个元素. public E removeFirst() 移除并返回此列表的 ...
- hdu 1163
别人的代码开始自己不知道什么数论解法: ab*ab=(a*10+b)(a*10+b)=a^2*100+2ab*10+b^2 所以the root digital=(a+b)*(a+b): 而数论中的定 ...
- 页面安装Jre
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="0" height ...
- 关于App class loader的总结
关于App class loader的总结 2010-05-11 15:19:09 分类: 系统运维 Java本身是一种设计的非常简单,非常精巧的语言,所以Java背后的原理也很简单,归结起来就是两点 ...
- 数据库SQL Server2012笔记(三)——表的复杂查询
1.数据分组--max/min/avg/sum/count select avg(字段名),sum(字段名) from 表名 select count(*) from 表名 select ...
- COCOS2D-X 动作 CCSequence动作序列
CCSequence继承于CCActionInterval类,CCActionInterval类为延时动作类,即动作在运行过程中有一个过程. CCSequence中的重要方法: static CCSe ...
- oracle 11gR2 如何修改 private ip
1.1 修改 private ip1.1.1 确保crs集群是打开的可以用olsnodes –s 检查集群的状态./olsnodes -sP570a ActiveP570b Active1.1 ...
- 浅谈for循环
for循环 <script> /* ** (1) 是执行代码块之前 ** (2) 运行代码块的条件 ** (3) 需要执行的代码块 ** (4) 代码块执行后执行 ** 执行顺序是(1)( ...
- apache配置httpd.conf的webapp根目录(基于appserv服务)
只要修改httpd.conf中两个配置项的值即可: DocumentRoot "E:/workspacePHP/what" <Directory "E:/works ...
- ASP.NET中各种缓存技术的特点及使用场景
对于一些不经常改变却经常被request的数据,我们喜欢将它们缓存在内存.这样用户请求时先到缓存中去取,如果缓存中没有,再去数据库拿,提高响应速度.缓存一般实现在BLL,这样可以与DAL分离,更换数据 ...