读取文本文件

    读取文本文件：

    <input type="file" id="file1" accept="*" />

</div>

<div>

    显示进度：

    <progress id="pro" value=""></progress>

</div>

<div id="result"></div>

<script type="text/javascript">

        var file1 = document.getElementById('file1');

        file1.onchange = function () {

            var file = file1.files[];

            //读取为二进制

            var reader = new FileReader();

            reader.readAsText(file,'utf-8');

            //reader.readAsBinaryString(file);

            //显示进度

            var pro = document.getElementById('pro');

            pro.max = file.size;

            pro.value = ;

            reader.onprogress = function (e) {

                pro.value = e.loaded;

            }

            reader.onload = function () {

                document.getElementById('result').innerHTML = reader.result;

            }

        }

</script>

读取二进制文件

    读取文本文件：

    <input type="file" id="file1" accept="*" />

</div>

<div>

    显示进度：

    <progress id="pro" value=""></progress>

</div>

<div id="result"></div>

<script type="text/javascript">

        var file1 = document.getElementById('file1');

        file1.onchange = function () {

            var file = file1.files[];

            //读取为二进制

            var reader = new FileReader();

            reader.readAsText(file,'utf-8');

            //reader.readAsBinaryString(file);

            //显示进度

            var pro = document.getElementById('pro');

            pro.max = file.size;

            pro.value = ;

            reader.onprogress = function (e) {

                pro.value = e.loaded;

            }

            reader.onload = function () {

                document.getElementById('result').innerHTML = reader.result;

            }

        }

</script>

预览图片

预览图片：

        <input id="images" type="file" multiple accept="image/*" />

        <script type="text/javascript">

            var imgInput = document.getElementById('images');

            imgInput.onchange = function () {

                //1.获取所有选中文件列表

                var fileList = imgInput.files;

                //2.遍历显示信息

                for (var i = ; i < fileList.length; i++) {

                    var file = fileList[i];

                    //一次读取文件的文件名，文件类型，文件大小

                    var div = document.createElement('div');

                    div.innerHTML = "第" + (i + ) + "个文件的文件名：" +

                        file.name

                        + ",文件类型：" + file.type

                        + "，文件大小：" + file.size;

                    //添加到 body中

                    document.body.appendChild(div);

                }

            }

        </script>

读取图片并展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简单的html5 File测试 for pic2base64</title>

<script>

window.onload = function(){

var input = document.getElementById("demo_input");

var result= document.getElementById("result");

var img_area = document.getElementById("img_area");

if ( typeof(FileReader) === 'undefined' ){

    result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";

    input.setAttribute( 'disabled','disabled' );

} else {

    input.addEventListener( 'change',readFile,false );}

}

function readFile(){

    var file = this.files[];

    console.log(file);

    //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件

    if(!/image\/\w+/.test(file.type)){

    alert("请确保文件为图像类型");

    return false;

}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e){

   // result.innerHTML = '<img src="'+this.result+'" alt=""/>';

    img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';

}

}

</script>

</head>

<body>

<input type="file" value="sdgsdg" id="demo_input" />

<textarea id="result" rows= cols=></textarea>

<p id="img_area"></p>

</body>

</html>

读取图片并展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简单的html5 File测试 for pic2base64</title>

<body>

<p>

   <label>请选择一个图像文件：</label>

   <input type="file" id="file_input" />

</p>

<div id="result"></div>

</body>

<script>

var result = document.getElementById("result");

var input = document.getElementById("file_input"); 

if(typeof FileReader==='undefined'){

    result.innerHTML = "抱歉，你的浏览器不支持 FileReader";

    input.setAttribute('disabled','disabled');

}else{

    input.addEventListener('change',readFile,false);

}

function readFile(){

    var file = this.files[];

    if(!/image\/\w+/.test(file.type)){

        alert("文件必须为图片！");

        return false;

    }

    var reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function(e){

        result.innerHTML = '<img src="'+this.result+'" alt=""/>'

    }

}

</script>

</html>

获得blod 路径并使用

<!DOCTYPE html>

<html lang="en" >

    <head>

        <title>files</title>

    </head>

    <body>

        <img id = 'img1' src="" alt="bukejian"/>

        <input type="file" id="files" onchange="readFile()" />

        <p id="out"></p>

    </body>

    <script  >

        function readFile(){

            var a = document.createElement('a');

            var img2 = document.createElement('img');

            var uri = document.getElementById('files').files[];

            var url = window.URL.createObjectURL(uri);

            a.href=url;

            url=a.href;

            alert(url);

            document.getElementById('img1').src=url;

            //document.getElementById('out').innerHTML=uri;

        }

    </script>

</html>

js 读取文件的更多相关文章

  1. 前端使用js读取文件

    最近同时问我js能不能读取本地文件: 想起以前看到js读取本地文件的文章,然后自己写了个demo. ps:这有点想Java的IO流,但是又有差别. 首先我们定义一个input标签type=" ...

  2. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  3. Node.js读取文件内容

    原文链接:http://blog.csdn.net/zk437092645/article/details/9231787 Node.js读取文件内容包括同步和异步两种方式. 1.同步读取,调用的是r ...

  4. asp.net和js读取文件的MD5值的方法

    前言 文件的md5值,即文件签名,为了验证文件的正确性,是否被恶意篡改等.每个文件有一个唯一的md5值. 最近公司开发的app文件包的校验就有用到文件md5值. 一.asp.net获取 ①和上传文件一 ...

  5. JS读取文件,Javascript之文件操作 (IE)

    一.功能实现核心:FileSystemObject 对象      要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象. 二.FileSystemObject ...

  6. node.js 读取文件--createReadStream

    createReadStream 是fs模块里面读流的一个方法 这个方法基于fs模块的,所以我们先要引进fs模块 let fs=require("fs"); createReadS ...

  7. Node.js读取文件相对路径写法注意

    首先看一下文件的存放结构: 我们现在希望在上面标记的JS文件里面读取html里面的内容,我们的代码如下: var fs=require("fs"); fs.readFile('te ...

  8. Node.js读取文件内容并返回值(非异步)

    主要解决的问题的,以最近VsCode插件开发为例,每次请求都需要token,而vscode并不支持cookie这样的存储,所以就采用粗暴点办法,存到某个用户目录下并读取. 源码如下: var fs=r ...

  9. node.js 读取文件

    一般用法 var path = require("path"); var fs = require("fs"); //let filePath = path.j ...

随机推荐

  1. MySQL 字符串 分割 多列

    mysql如何进行以,分割的字符串的拆分 - 我有一个梦想 - CSDN博客https://blog.csdn.net/u012009613/article/details/52770567 mysq ...

  2. 数据标记系列——标记工具Imagtagger

    https://github.com/bit-bots/imagetagger 待有空说一说!

  3. Python datetime模块的介绍

    datetime模块常用的主要有下面这四个类:(要清楚import datetime : 导入的是datetime这个包,包里有各种类) 1. datetime.date   用于表示年月日构成的日期 ...

  4. ESXI 6.5安装详细步骤

    网址:http://blog.51cto.com/laotang6/2044861 ESXi是专为运行虚拟机.最大限度降低配置要求和简化部署而设计.只需几分钟时间,客户便可完成从安装到运行虚拟机的全过 ...

  5. bzoj 3223: Tyvj 1729 文艺平衡树 (splay）

    链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3223 题面: 3223: Tyvj 1729 文艺平衡树 Time Limit: 10 S ...

  6. Magento2.X 前端&综合 简要

    主题是Magento的应用程序,它提供了整个应用的前端部分: 主题旨在覆盖或自定义视图层资源,通过模块和库最初提供.主题由不同的供应商(前端开发人员)实施,并拟分配为类似于其他组件的Magento系统 ...

  7. SDOI2017 Round2 详细题解

    这套题实在是太神仙了..做了我好久...好多题都是去搜题解才会的 TAT. 剩的那道题先咕着,如果省选没有退役就来填吧. 「SDOI2017」龙与地下城 题意 丢 \(Y\) 次骰子,骰子有 \(X\ ...

  8. <数据结构基础学习>（二）简单的时间复杂度分析

    一.简单的复杂度分析 O(1) O(n) O(logn) O(logn) O(n^2) 大O描述的是算法的运行事件和输入数据之间的关系 Eg: 数组求和 public static int sum(i ...

  9. BZOJ 3192: [JLOI2013]删除物品（树状数组）

    题面: https://www.lydsy.com/JudgeOnline/problem.php?id=3192 题解: 首先每次一定是来回移动直到最大的到顶上. 所以我们可以将第两个堆的堆顶接起来 ...

  10. 老男孩Python全栈学习 S9 日常作业 004

    1.写代码,有如下列表,按照要求实现每一个功能 li = ["alex", "WuSir", "ritian", "barry&q ...