一、读取文本文件内容,指定字符编码

<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 读取文件(二)的更多相关文章

  1. HTML5 文件域+FileReader 读取文件(一)

    在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...

  2. HTML5 文件域+FileReader 读取文件并上传到服务器(三)

    一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...

  3. HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

    一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...

  4. FileReader读取文件详解

    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...

  5. FileReader读取文件

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  6. FileReader读取文件里文乱码问题

    有一个UTF-8编码的文本文件,用FileReader读取到一个字符串,然后转换字符集:str=newString(str.getBytes(),"UTF-8");结果大部分中文显 ...

  7. H5 FileReader读取文件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. R8—批量生成文件夹,批量读取文件夹名称+R文件管理系统操作函数

    一. 批量生成文件夹,批量读取文件夹名称 今日,工作中遇到这样一个问题:boss给我们提供了200多家公司的ID代码(如6007.7920等),需要根据这些ID号去搜索下载新闻,从而将下载到的新闻存到 ...

  9. python练习六十一:文件处理,读取文件内容

    python练习六十一:文件处理,读取文件内容 假设要读取text.txt文件中内容 写文件(如果有文件,那直接调用就行,我这里自己先创建的文件) list1 = ['python','jave',' ...

随机推荐

  1. swift中类似宏定义

    建一个类 如,在Contans.swift中 import UIKit let kMAIN_SIZE = UIScreen.mainScreen().bounds 在其他地方直接用 比如在 MyTab ...

  2. 使用m2eclipse搭建Web项目

    这篇文章已经指导好了:http://www.cnblogs.com/quanyongan/archive/2013/04/21/3033838.html

  3. JAVA程序,SESSION没有关闭导致数据库异常

    可以看到连接到数据库的机器名为perass: PROCESS 1234表示是JDBC的进程 查询SQL: select username,         machine,         statu ...

  4. TCP/IP TELNET & SSH

    快速导航 远程登录示例 关于远程登录? 嵌入? 用来控制远程服务器上运行的应用程序字符? 转义? 操作方式? 关于SSH? 远程登录示例 关于远程登录? 网络虚拟终端(Network Virtual ...

  5. Linux Kernel 'perf_event.c'本地权限提升漏洞

    漏洞版本: Linux Kernel 3.11-rc4 漏洞描述: Linux Kernel是一款开源的操作系统 Linux Kernel 'perf_event.c'存在一个安全漏洞,允许本地攻击者 ...

  6. 【转】微信Android SDK示例代码及运行方法

    原文网址:http://blog.csdn.net/icyfox_bupt/article/details/23742217 最近在研究微信SDK,无奈网上好使的教程太少,对于程序员来说最好的东西,一 ...

  7. 成为Web开发人员的7个简单步骤

    你想成为一名 Web 开发人员,但现在你面前有这样一个问题,那就是你没有在高科技行业工作的经验.你上了一些课程,也花了时间在个人编码项目上,但是你的简历上关于“经验”的部分仍然不为企业承认.过渡到一个 ...

  8. House Robber II——Leetcode

    After robbing those houses on that street, the thief has found himself a new place for his thievery ...

  9. 《University Calculus》-chape8-无穷序列和无穷级数-基本极限恒等式

    基于基本的极限分析方法(诸多的无穷小以及洛必达法则),我们能够得到推导出一些表面上看不是那么显然的式子,这些极限恒等式往往会在其他的推导过程中用到,其中一个例子就是概率论中的极限定理那部分知识.

  10. Intersecting Lines - POJ 1269(判断平面上两条直线的关系)

    分析:有三种关系,共线,平行,还有相交,共线和平行都可以使用叉积来进行判断(其实和斜率一样),相交需要解方程....在纸上比划比划就出来了....   代码如下: ================== ...