js 读取文件

读取文本文件

    读取文本文件：

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

前端使用js读取文件
最近同时问我js能不能读取本地文件: 想起以前看到js读取本地文件的文章,然后自己写了个demo. ps:这有点想Java的IO流,但是又有差别. 首先我们定义一个input标签type=" ...
jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
Node.js读取文件内容
原文链接:http://blog.csdn.net/zk437092645/article/details/9231787 Node.js读取文件内容包括同步和异步两种方式. 1.同步读取,调用的是r ...
asp.net和js读取文件的MD5值的方法
前言文件的md5值,即文件签名,为了验证文件的正确性,是否被恶意篡改等.每个文件有一个唯一的md5值. 最近公司开发的app文件包的校验就有用到文件md5值. 一.asp.net获取 ①和上传文件一 ...
JS读取文件,Javascript之文件操作 (IE)
一.功能实现核心:FileSystemObject 对象要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象. 二.FileSystemObject ...
node.js 读取文件--createReadStream
createReadStream 是fs模块里面读流的一个方法这个方法基于fs模块的,所以我们先要引进fs模块 let fs=require("fs"); createReadS ...
Node.js读取文件相对路径写法注意
首先看一下文件的存放结构: 我们现在希望在上面标记的JS文件里面读取html里面的内容,我们的代码如下: var fs=require("fs"); fs.readFile('te ...
Node.js读取文件内容并返回值(非异步)
主要解决的问题的,以最近VsCode插件开发为例,每次请求都需要token,而vscode并不支持cookie这样的存储,所以就采用粗暴点办法,存到某个用户目录下并读取. 源码如下: var fs=r ...
node.js 读取文件
一般用法 var path = require("path"); var fs = require("fs"); //let filePath = path.j ...

随机推荐

EChars学习之路1
引入echarts.min.js或者使用CDN https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js 为ECharts准备一个具备大小(宽高 ...
题解 P1601 【A+B Problem（高精）】
P1601 A+B Problem(高精) 题目描述高精度加法,x相当于a+b problem,b不用考虑负数. 输入输出格式输入格式: 分两行输入a,b<=10^500 输出格式: 输出只 ...
set 数据类型
list => 允许重复的集合,可修改 tuple => 允许重复的集合,不可修改 dict set => 不允许重复的集合 .set 不允许重复的列表 1.创建 s = set() ...
舵机&数据处理&stm32内存之堆栈溢出（遇到的问题）
产品名称:TOWER PRO(辉盛)大扭力舵机MG996R (MG995升级产品)6v/11Kg厂家编号:MG996R产品净重: 55g产品尺寸: 40.7*19.7*42.9mm产品拉力: 9.4k ...
HBase · 印象
2018-12-20 关键词: HBase是什么 . 什么是HBase . HBase基本概念本篇文章系本人根据目前所掌握的知识对 HBase 的基本概念作出的一篇轻简式科普文章.关于文章所述的知识 ...
python yield 理解与用法
1.一句话快速理解 yield 等于 return 这么简单理解 2.详细说明: yield和return的关系和区别了,带yield的函数是一个生成器,而不是一个函数了这个生成器有一个函数就是n ...
python中os.path.isdir()函数的使用
在python 中,os.path.isdir(path)函数主要用来判断函数内部的path是否为一个目录具体关于这个函数的解说参考博客https://blog.csdn.net/xjp_xujip ...
20175209 《Java程序设计》第六周学习总结
20175209 <Java程序设计>第六周学习总结一.教材知识点总结第七章内部类与异常类 1.内部类定义:在一个类中定义的另一个类称作内部类,包含内部类的类成为内部类的外嵌类. ...
Vue工具
首先介绍几个概念 webpack: 打包机.它能将我们的html,css,js.png,font进行打包,交给服务器. vue-cli: 用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是 ...
金融量化分析【day113】：多因子选股
一.什么是多因子选股在股市中征战过的朋友们应该知道,股市之道无非三点.1择时,2选股,3 仓控.精通这三点中的任何一点,都足以在股市中所向披靡.但是精通二字何其艰难!!!矫情的话多不多说,咱们进入正 ...

js 读取文件

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

随机推荐

热门专题