读取文本文件

    读取文本文件：

    <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. [转帖]如何重置CentOS/RHEL 7中遗忘的根用户帐户密码

    如何重置CentOS/RHEL 7中遗忘的根用户帐户密码 https://www.cnblogs.com/swordxia/p/4389466.html 作者的blog质量很高呢 没看完 但是感觉 很 ...

  2. SQL Server没有足够的内存继续执行程序 (mscorlib)的解决办法

    在Microsoft SQL Server Management Studio 中执行较大的sql脚本时,会报没有足够的内存继续执行程序(mscorlib)的错误.如下图所示 解决方法: 使用sqlc ...

  3. 【转】CENTOS/RHEL 7 系统中设置SYSTEMD SERVICE的ULIMIT资源限制

    在bash中,有个ulimit命令,提供了对shell及该shell启动的进程的可用资源控制.主要包括打开文件描述符数量.用户的最大进程数量.coredump文件的大小等. 在centos 5/6 等 ...

  4. Servlet的 GenericServlet 和 HttpServlet

    一.GenericServlet? servlet 是一个接口 下面有两个抽象类 GenericServlet 和 HttpServlet 需要被 继承并重写其中的方法. package javawe ...

  5. 在本机使用虚拟机安装一个linux系统，并搭建ftp服务器

    一.Linux基础使用:linux服务器环境搭建(FTP服务器), 在本机使用虚拟机安装一个linux系统,并搭建ftp服务器,要求能使用ftp服务将本机文件到保存linux虚拟机上 资料: VMwa ...

  6. windows下零基础gulp构建

    在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识.首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置 ...

  7. 机器学习---文本特征提取之词袋模型（Machine Learning Text Feature Extraction Bag of Words）

    假设有一段文本:"I have a cat, his name is Huzihu. Huzihu is really cute and friendly. We are good frie ...

  8. Ubuntu和Windows双系统的安装

    本菜鸡的ACM生涯大概是结束了 最有希望的EC和焦作也顺利的铁了,一路走来还是怪自己不努力,整日整日的划水,算了,铁牌退役,也是自己应有的惩罚,静下心来吧 下面介绍如何装windows10和Ubunt ...

  9. 结合别人的文章，做RocketMQ的一点原理分析，结合源码(尽量)----未完待续

    Broker 与Namesrv的关系 1.从namesrv获取配置信息 /** * BrokerConfig类 * * broker每隔30秒(此时间无法更改)向所有nameserver发送心跳,心跳 ...

  10. Self-organizing Maps及其改进算法Neural gas聚类在异常进程事件识别可行性初探

    catalogue . SOM简介 . SOM模型在应用中的设计细节 . SOM功能分析 . Self-Organizing Maps with TensorFlow . SOM在异常进程事件中自动分 ...