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中的信号量Semaphore
Semaphore(信号量)充当了操作系统概念下的“信号量”.它提供了“临界区中可用资源信号量”的相同功能.以一个停车场运作为例.为了简单起见,假设停车场只有三个车位,一开始三个车位都是空的.这时如果 ...
- Lua常用的数据结构表示
1.矩阵 Lua中有两种表示矩阵的方法,一是“数组的数组”.也就是说,table的每个元素是另一个table.例如,可以使用下面代码创建一个n行m列的矩阵:mt = {} -- cr ...
- Linux下让tomcat显示图片(jdk1.4, tomcat4.0 或更高版本)
1.步骤:修改$CATALINA_HOME/bin/catalina.sh文件($CATALINA_HOME是指tomcat安装目录),在原文件的40行新增如下内容即可CATALINA_OPTS=&q ...
- 【HDOJ】5203 Rikka with wood sticks
/* 1002 */ #include <iostream> #include <string> #include <map> #include <queue ...
- Service Trace Viewer Tool (SvcTraceViewer.exe)
Service Trace Viewer Tool <?xml version="1.0" encoding="utf-8" ?> <conf ...
- 【转】linux 中dd命令使用详解
原文网址:http://xiaozhuang.blog.51cto.com/4396589/850657 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究 ...
- canvas——画板
注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...
- 《A First Course in Probability》-chaper7-期望的性质-相关系数
之前我们介绍过,协方差能够一定程度上描述两个变量之间的相关性,但是有时候它并没有那么准确,例如下面这个例子: 本质一样的两个随机变量,独立性是不变的,但是通过这个等式我看到,如果在随机变量的前面添加了 ...
- MySQL注入总结
SELECT first_name, last_name FROM users WHERE user_id = '$id' 1.id=1' or 1=1 -- 这个可以查询所有的信息,其中“- ...
- java_method_readFile读取文件文本xls
package cn.com.qmhd.tools; import java.io.FileInputStream; import java.io.FileNotFoundException; imp ...