<body>

        <p><label>请选择一个图像文件：</label><input type="file" id="demo_input" /></p>

        <div id="demo_result"></div>

        <script type="text/javascript">

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

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

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

                result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";

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

            }else{

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

            }

            function readFile(){

                var file = this.files[0];

                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>

    </body>

2,下面是我修改的，多图上传，本地预览:

<html>

    <head>

        <title>File Reader</title>

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

        <style>

            body{

                text-align:center;

            }

            #demo_result img{

                border:2px solid #369;

                padding:3px;

            }

            p{

                padding:20px 0;

            }

            .warn{

                font-weight:bold;

                color:red;

            }

        </style>

    </head>

    <body>

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

        <input type="file" multiple="multiple" id="demo_input" />

        </p>

        <div id="demo_result"></div>

<script type="text/javascript">

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

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

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

        result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";

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

    }else{

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

    }

    function readFile(){            

        for(var i=0;i<this.files.length;i++)

        {

            var file = this.files[i];

            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>

    </body>

</html>

FileReader本地预览图片的更多相关文章

  1. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  2. js 本地预览图片和得到图片实际大小

    //填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...

  3. js在本地预览图片

    移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...

  4. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  5. js本地预览图片

    废话不说  直接上代码 <script type="text/javascript" src="http://code.jquery.com/jquery-late ...

  6. 浏览器 本地预览图片 window.url.createobjecturl

    第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...

  7. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

  8. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  9. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

随机推荐

  1. tomcat和mysql安装配置总结

    我安装的tomcat和mysql都是解压缩版的.安装和配置tomcat倒没花费我多少时间,主要是mysql,几乎花费了我一天的时间. Tomcat安装总结: 首先将下载好的tomcat压缩包解压放在其 ...

  2. 4.给定一个正整数m，统计m的位数，分别打印每一位数字，再按照逆序打印出各位数字。 要求：m定义为类的属性，需定义构造函数为m赋值；当m大于99999时，输出错误信息“the number is too large”，不再执行。

    package a; public class ShuZi { int m; public int getM() { return m; } public void setM(int m) { thi ...

  3. （1）创建一个叫做机动车的类： 属性：车牌号(String)，车速(int)，载重量(double) 功能：加速(车速自增)、减速(车速自减)、修改车牌号，查询车的载重量。 编写两个构造方法：一个没有形参，在方法中将车牌号设置“XX1234”，速 度设置为100，载重量设置为100；另一个能为对象的所有属性赋值； （2）创建主类： 在主类中创建两个机动车对象。

    package a; public class Jidongche { private String chepaihao; private int chesu; private double zaiz ...

  4. BZOJ 1513 [POI2006]Tet-Tetris 3D

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1513 题意:三维空间,有一些立方体在垂直下落.立方体的左下角坐标(x,y)以及长宽 ...

  5. JAVA 实战练习

    1.判断变量是否为奇数偶数. package com.JAVA; import java.util.Scanner; public class text { public static void ma ...

  6. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  7. shell应用——主控脚本实现（1）

    shell脚本作用:内网ip,公网ip :cpu负载,内存使用量:ngix和mysql...

  8. ajax请求、servlet返回json数据

    ajax请求.servlet返回json数据 1.方式一 response.setcontenttype("text/html;charset=utf-8"); response. ...

  9. Python面向对象入门

    http://www.math.pku.edu.cn/teachers/qiuzy/ds_python/courseware/ 这本书的第二章写的是抽象数据类型和Python类 以前从没想过认真的去写 ...

  10. Mybatis Generator（定制化）代码生成器

    1.使用Mapper专用的MyBatis Generator插件 通用Mapper在1.0.0版本的时候增加了MyBatis Generator(以下简称MBG)插件,使用该插件可以很方便的生成实体类 ...