读取文本文件

    读取文本文件：

    <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. Teching Yourself Programming in Ten Years -Peter Norvig

    http://norvig.com/21-days.html 我们经常能看到“7天搞定51单片机”.“21天学会C++”这样样式的标题,编程真的很容易吗?似乎比其他事情要简单很多呀!是的,糟糕的编程确 ...

  2. 电脑浅色显示器不显示怎么办，如何用PS去除logo底色

    本人买了新电脑后,虽然电脑显示器颜色也不错,就是刚买回来提示个true color没正确安装,我也没在意,因为感觉电脑显示方面还是不错的,后来定做安装程序用logo图的时候,有个浅色背景色,自己没看出 ...

  3. min-max容斥/最值反演及其推广

    设\(S\)是一个集合,\(\max(S)\)和\(\min(S)\)分别表示集合中的最大值与最小值. 那么有如下式子成立: \[\max(S)=\sum_{T \subseteq S}(-1)^{| ...

  4. LIS的O(nlogn)算法

    出自蓝书<算法竞赛入门经典训练指南> 求最长上升子序列是很常见的可以用动态规划解决的问题…… 很容易根据最优子结构之类的东西得出 $\text{dp}[i]$为以第i个数结尾的最长上升子序 ...

  5. [BZOJ 4818] [SDOI 2017] 序列计数

    Description Alice想要得到一个长度为 \(n\) 的序列,序列中的数都是不超过 \(m\) 的正整数,而且这 \(n\) 个数的和是 \(p\) 的倍数. Alice还希望,这 \(n ...

  6. Codeforces437 B. The Child and Set

    题目类型:位运算 传送门:>Here< 题意:给出\(sum和limit\),求一个集合\(S\),其中的元素互不相同且不超过\(limit\),他们的\(lowbit\)之和等于\(su ...

  7. poj 3764 The xor-longest Path (01 Trie）

    链接:http://poj.org/problem?id=3764 题面: The xor-longest Path Time Limit: 2000MS   Memory Limit: 65536K ...

  8. 【BZOJ5499】[2019省队联测]春节十二响（贪心）

    [BZOJ5499][2019省队联测]春节十二响(贪心) 题面 BZOJ 洛谷 题解 如果是一条折链,显然维护两侧的值,每次两个堆分别弹出一个\(max\)然后合并一下,最后再放回去就可以了. 那么 ...

  9. 洛谷 P2042 【[NOI2005]维护数列】

    一直在想要做这道题,但是被那个硕大的Splay标签压垮了 好了,切入正题 这道题应该是我第二次用splay来维护区间问题 我还是太菜了QAQ 其实思路也很简单,就是以每一个位置的下标来进行维护,然后其 ...

  10. [CTSC2018]暴力写挂

    题目描述 www.lydsy.com/JudgeOnline/upload/201805/day1(1).pdf 题解 首先来看这个我们要最大化的东西. deep[u]+deep[v]-deep[lc ...