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 ...

随机推荐

如何给框架添加API接口日志
前言用的公司的框架,是MVC框架,看了下里面的日志基类,是操作日志,对增删改进行记录, 夸张的是一张业务的数据表需要一张专门的日志表进行记录, 就是说你写个更新,添加的方法都必须写一遍操作日志,代 ...
Java 如何存取MySQL datetime类型
1 在java中只有Date类型,这样数据存储到MySQL会出现问题,前台提交的数据,比如2018-03-20 17:30:59,后台用Date接受的时候,由于Date只精确到天,所以默认接收时间为2 ...
DAY10、函数的参数
一.实参:为形参传递值调用函数时,实参可以由常量,变量,表达式三种的组合 1.位置实参:必须按照位置的顺序,从左到右为形参传递值 fn1(10, 20, 30) fn1(30, 20, 10) 2. ...
mysql 导入出csv
load data infile '/var/lib/mysql-files/ip_address.csv' into table ip_address fields terminated by ', ...
常用CSS3
(ಥ_ಥ) 啊啊,我的胃好疼啊.感觉最近胃又开始不舒服了.啊——果然老了呢,想当初,我也是不坏金刚之身来着呢,唉,我的可怜的小胃胃 (ಥ_ಥ) 记录几个已经常见的不能再常见的css3样式. ...
小数点保留n位有效数字
char *psf = "183.0000000000000001"; ]; sprintf(chBuff, "%.2lf", atof(psf)); doub ...
Arrays 三种基本常用法
一:背景 jdk中为了便于开发,给开发者提供了Arrays类,其中包含了很多数组的常用操作.例如快速输出.排序.查找等二: import java.util.Arrays; //(需要引用class ...
使用System.out.printf()输出日志重定向到文件后显示混乱问题
写了一个小工具,使用System.out.printf()输出日志,以方便使用者查看,在终端显示没有问题,但重定向到文件就有问题了,会出现一些很奇怪的乱序现象. 上网查询资料,判断应该是跟重定向和Li ...
windows下零基础gulp构建
在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识.首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置 ...
【模板】2-SAT 问题
[传送门] 分析按照逻辑关系建图,跑tarjan,如果上下点在一个环中,说明不可能,不然就可能. 代码 #include <bits/stdc++.h> #define ll long ...

js 读取文件

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

随机推荐

热门专题