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

  1. <div class="container">
  2. <!--文本文件验证-->
  3. <input type="file" id="file" multiple accept="text/plain" />
  4. <input type="button" id="btn1" value="读取文件内容" onclick="showFiles();" />
  5. <h4>选择文件如下:</h4>
  6. <blockquote></blockquote>
  7. </div>

js:

  1. //读取文本文件实例
  2. var fileBox = document.getElementById('file');
  3. function showFiles() {
  4. //获取选择文件的数组
  5. var fileList = fileBox.files;
  6. for (var i = 0; i < fileList.length; i++) {
  7. var file = fileList[i];
  8. readFile(file);
  9. }
  10. }
  11. //读取文件内容
  12. function readFile(file) {
  13. var reader = new FileReader();
  14. //中文windows系统 txt 文本多数默认编码 gbk
  15. reader.readAsText(file, 'gbk');
  16. reader.onload = function (e) {
  17. var result = reader.result;
  18. $('.container blockquote').text(result);
  19. }
  20. }

二、读取或预览客户图片

  1. <div class="container">
  2. <!--图片类型验证方法1-->
  3. <input type="file" id="file" multiple accept="image/*" />
  4. <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />
  5. <h4>选择文件如下:</h4>
  6. <img src="" id="img1" />
  7. </div>

JS:

  1. //读取图片实例
  2. var fileBox = document.getElementById('file');
  3. function showFiles() {
  4. //获取选择文件的数组
  5. var fileList = fileBox.files;
  6. for (var i = 0; i < fileList.length; i++) {
  7. var file = fileList[i];
  8. //图片类型验证第二种方式
  9. if (/image\/\w+/.test(file.type))
  10. readFile(file);
  11. else
  12. console.log(file.name + ':不是图片');
  13. }
  14. }
  15. //读取图片内容 为DataURL
  16. //reader.readAsDataURL
  17. function readFile(file) {
  18. var reader = new FileReader();
  19. reader.readAsDataURL(file);
  20. reader.onload = function (e) {
  21. var result = reader.result;
  22. $('.container blockquote').text(result);
  23. $('#img1').attr('src', result)
  24. }
  25. }
 

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. java中的信号量Semaphore

    Semaphore(信号量)充当了操作系统概念下的“信号量”.它提供了“临界区中可用资源信号量”的相同功能.以一个停车场运作为例.为了简单起见,假设停车场只有三个车位,一开始三个车位都是空的.这时如果 ...

  2. Lua常用的数据结构表示

    1.矩阵 Lua中有两种表示矩阵的方法,一是“数组的数组”.也就是说,table的每个元素是另一个table.例如,可以使用下面代码创建一个n行m列的矩阵:mt = {}          -- cr ...

  3. Linux下让tomcat显示图片(jdk1.4, tomcat4.0 或更高版本)

    1.步骤:修改$CATALINA_HOME/bin/catalina.sh文件($CATALINA_HOME是指tomcat安装目录),在原文件的40行新增如下内容即可CATALINA_OPTS=&q ...

  4. 【HDOJ】5203 Rikka with wood sticks

    /* 1002 */ #include <iostream> #include <string> #include <map> #include <queue ...

  5. Service Trace Viewer Tool (SvcTraceViewer.exe)

    Service Trace Viewer Tool <?xml version="1.0" encoding="utf-8" ?> <conf ...

  6. 【转】linux 中dd命令使用详解

    原文网址:http://xiaozhuang.blog.51cto.com/4396589/850657 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究 ...

  7. canvas——画板

    注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...

  8. 《A First Course in Probability》-chaper7-期望的性质-相关系数

    之前我们介绍过,协方差能够一定程度上描述两个变量之间的相关性,但是有时候它并没有那么准确,例如下面这个例子: 本质一样的两个随机变量,独立性是不变的,但是通过这个等式我看到,如果在随机变量的前面添加了 ...

  9. MySQL注入总结

    SELECT first_name, last_name FROM users WHERE user_id = '$id' 1.id=1' or 1=1 --     这个可以查询所有的信息,其中“- ...

  10. java_method_readFile读取文件文本xls

    package cn.com.qmhd.tools; import java.io.FileInputStream; import java.io.FileNotFoundException; imp ...