HTML5 文件域+FileReader 读取文件(二)
一、读取文本文件内容,指定字符编码
<div class="container">
<!--文本文件验证-->
<input type="file" id="file" multiple accept="text/plain" />
<input type="button" id="btn1" value="读取文件内容" onclick="showFiles();" />
<h4>选择文件如下:</h4>
<blockquote></blockquote>
</div>
js:
//读取文本文件实例
var fileBox = document.getElementById('file');
function showFiles() {
//获取选择文件的数组
var fileList = fileBox.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
readFile(file);
}
}
//读取文件内容
function readFile(file) {
var reader = new FileReader();
//中文windows系统 txt 文本多数默认编码 gbk
reader.readAsText(file, 'gbk');
reader.onload = function (e) {
var result = reader.result;
$('.container blockquote').text(result);
}
}
二、读取或预览客户图片
<div class="container">
<!--图片类型验证方法1-->
<input type="file" id="file" multiple accept="image/*" />
<input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />
<h4>选择文件如下:</h4>
<img src="" id="img1" />
</div>
JS:
//读取图片实例
var fileBox = document.getElementById('file');
function showFiles() {
//获取选择文件的数组
var fileList = fileBox.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
//图片类型验证第二种方式
if (/image\/\w+/.test(file.type))
readFile(file);
else
console.log(file.name + ':不是图片');
}
}
//读取图片内容 为DataURL
//reader.readAsDataURL
function readFile(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var result = reader.result;
$('.container blockquote').text(result);
$('#img1').attr('src', result)
}
}
HTML5 文件域+FileReader 读取文件(二)的更多相关文章
- HTML5 文件域+FileReader 读取文件(一)
在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...
- HTML5 文件域+FileReader 读取文件并上传到服务器(三)
一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...
- HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket
一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...
- FileReader读取文件详解
FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...
- FileReader读取文件
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
- FileReader读取文件里文乱码问题
有一个UTF-8编码的文本文件,用FileReader读取到一个字符串,然后转换字符集:str=newString(str.getBytes(),"UTF-8");结果大部分中文显 ...
- H5 FileReader读取文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- R8—批量生成文件夹,批量读取文件夹名称+R文件管理系统操作函数
一. 批量生成文件夹,批量读取文件夹名称 今日,工作中遇到这样一个问题:boss给我们提供了200多家公司的ID代码(如6007.7920等),需要根据这些ID号去搜索下载新闻,从而将下载到的新闻存到 ...
- python练习六十一:文件处理,读取文件内容
python练习六十一:文件处理,读取文件内容 假设要读取text.txt文件中内容 写文件(如果有文件,那直接调用就行,我这里自己先创建的文件) list1 = ['python','jave',' ...
随机推荐
- 【Java】WEB-INF目录与META-INF目录的作用
/WEB-INF/web.xml Web应用程序配置文件,描述了 servlet 和其他的应用组件配置及命名规则. /WEB-INF/classes/包含了站点所有用的 class 文件,包括 ser ...
- Windows常见蓝屏故障分析
转自Windows常见蓝屏故障分析 症状描述: 当您在运行Microsoft Windows 2000/XP/Server 2003.Microsoft Windows Vista/Server 20 ...
- WINDOWS下简单操作SQLITE3
有测试操作的时候,还是很好的说~~~ 找个sqlite3.txt下载 sqlite3.exe db.sqlite3 SQLite version 3.7.13 2012-06-11 02:05:22 ...
- xcode5 ios7升级后的一系列问题解决
framework not found IOKit解决办法,打开终端:cd /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS. ...
- bzoj2729
一看就知道是数学题,考虑插空法由于老师只有两人,所以先对老师进行插空这里考虑两种情况:1.两个老师站在同一处,即两个男生之间站了两个老师这时候需要一个女生站在两个老师之间,再对女生插空,根据乘法原理即 ...
- 深入浅出Node.js (附录A) - 安装Node
A.1 Windows系统下的Node安装 A.2 Mac系统下Node的安装 A.3 Linux系统下Node的安装 A.4 总结 A.5 参考资源
- 什么是系统,什么是算法 -- lemon OA 系统学习总结
一.对于模块划分的理解 对于一个大型(这里还只是一个中型系统)系统来说,代码的编写不是一日而就的,层次的明细也不是一眼就能看清楚的. 在这种情况下,需要想好,最好是由上而下地想好. 能够模块式地划分最 ...
- eclipse报错 com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 转
今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误,并且工程文件打不开了,在网上找了一下资料,然后按照方法操作了一遍,好了 ...
- Asp.Net MVC4新特性指南(1): 基本介绍
这段时间项目不紧,没啥事,就琢磨着把MVC4了解下.看看有啥新特性,顺便发表个博文记录下.哈哈. MVC4我们就用到了微软的Visual Studio 2012(http://www.microsof ...
- Poj 2478-Farey Sequence 欧拉函数,素数,线性筛
Farey Sequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14291 Accepted: 5647 D ...