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',' ...
随机推荐
- swift中类似宏定义
建一个类 如,在Contans.swift中 import UIKit let kMAIN_SIZE = UIScreen.mainScreen().bounds 在其他地方直接用 比如在 MyTab ...
- 使用m2eclipse搭建Web项目
这篇文章已经指导好了:http://www.cnblogs.com/quanyongan/archive/2013/04/21/3033838.html
- JAVA程序,SESSION没有关闭导致数据库异常
可以看到连接到数据库的机器名为perass: PROCESS 1234表示是JDBC的进程 查询SQL: select username, machine, statu ...
- TCP/IP TELNET & SSH
快速导航 远程登录示例 关于远程登录? 嵌入? 用来控制远程服务器上运行的应用程序字符? 转义? 操作方式? 关于SSH? 远程登录示例 关于远程登录? 网络虚拟终端(Network Virtual ...
- Linux Kernel 'perf_event.c'本地权限提升漏洞
漏洞版本: Linux Kernel 3.11-rc4 漏洞描述: Linux Kernel是一款开源的操作系统 Linux Kernel 'perf_event.c'存在一个安全漏洞,允许本地攻击者 ...
- 【转】微信Android SDK示例代码及运行方法
原文网址:http://blog.csdn.net/icyfox_bupt/article/details/23742217 最近在研究微信SDK,无奈网上好使的教程太少,对于程序员来说最好的东西,一 ...
- 成为Web开发人员的7个简单步骤
你想成为一名 Web 开发人员,但现在你面前有这样一个问题,那就是你没有在高科技行业工作的经验.你上了一些课程,也花了时间在个人编码项目上,但是你的简历上关于“经验”的部分仍然不为企业承认.过渡到一个 ...
- House Robber II——Leetcode
After robbing those houses on that street, the thief has found himself a new place for his thievery ...
- 《University Calculus》-chape8-无穷序列和无穷级数-基本极限恒等式
基于基本的极限分析方法(诸多的无穷小以及洛必达法则),我们能够得到推导出一些表面上看不是那么显然的式子,这些极限恒等式往往会在其他的推导过程中用到,其中一个例子就是概率论中的极限定理那部分知识.
- Intersecting Lines - POJ 1269(判断平面上两条直线的关系)
分析:有三种关系,共线,平行,还有相交,共线和平行都可以使用叉积来进行判断(其实和斜率一样),相交需要解方程....在纸上比划比划就出来了.... 代码如下: ================== ...