<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片预览</title>
</head>
<body>
    <!--
        文件上传在现代浏览器是基于FileReader API
        基于浏览器的安全策略，file标签在现在浏览器中已获取不到真实路径。而低版本ie可以获取到真实路径

        FileReader有四种读取文件的方式
            1.readAsBinaryString读取为二进制码
            2.readAsDataURL 读取为DataURL
            3.readAsText读取为文本
            4.readAsArrayBuffer 读取为队列缓存
        图片上传后的需求，需要将图片读取为DataURL,DataURL的固定格式，
        例如：data:[文件格式];base64,[文本流base64编码]
            1.jpg格式: data:image/jpeg;base64,/9j/4...
            2.png:data:image/png;base64,iVBORw...
            3.gif:data:image/gif;base64,R0IGOD...
     -->
     <input id="files" type="file" onchange="previewImage(this,'prvid')",multiple="multiple"/>
     <div id="prvid">预览容器</div>
</body>
<script type="text/javascript">
    function previewImage(file,prvid){
        /*
            file:file控件
            prvid:图片预览容器
        */
        var tip = "Expect jpg or png or gif!";
        var filters = {
                "jpeg":"/9j/4",
                "gif":"R0IGOD",
                "png":"iVBORw"
        };
        var prvbox = document.getElementById(prvid);
        prvbox.innerHTML = "";
        //浏览器支持FileReader
        if(window.FileReader){
            for(var i=0,f;f=file.files[i];i++){
                var fr = new FileReader();
                fr.onload = function(e){
                    var src = e.target.result;
                    //验证没通过
                    if(!validateImg(src)){
                        alert(tip);
                    }else{
                    //验证通过
                        showPrvImg(src);
                    }
                };
                fr.readAsDataURL(f);
            }
        //浏览器不支持FileReader
        }else{
            if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)){
                alert(tip);
            }else{
                showPrvImg(file.value);
            }
        }
        //验证图片
        function validateImg(data){
            var pos = data.indexOf(",")+1;
            for(var e in filters){
                if(data.indexOf(filters[e])===pos){
                    return e;
                }
            }
            return null;
        }
        //展示图片
        function showPrvImg(src){
            var img = document.createElement("img");
            img.src = src;
            prvbox.appendChild(img);
        }
    }
</script>
</html>

【Js应用实例】图片预览的更多相关文章

  1. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  2. js+jq实现图片预览，支持到ie9+ff+chrome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  4. 图片预览(适用于IE6,9,10，Firefox)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  6. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  7. 适用于各浏览器支持图片预览，无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  8. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  9. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

随机推荐

  1. Java缓存框架使用EhCache结合Spring AOP

    一.Ehcache简介     EhCache是一个纯Java的进程内缓存框架,具有如下特点:     1. 快速简单,非常容易和应用集成.     2.支持多种缓存策略 .     3. 缓存数据有 ...

  2. 初学angular

    1.angular   表达式 2.ng-app   ng-init  ng-model  ng-repeat ng-model是用于表单元素的,支持双向绑定.对普通元素无效: ng-bind用于普通 ...

  3. docker - 修改镜像/容器文件的在宿主机上的存储位置(转)

    背景 之前在使用docker的时候,由于启动container的时候用的是默认的mount(路径为 /var/lib/docker),这个目录对应的硬盘空间有限,只有200G左右.现在随着程序运行,有 ...

  4. 使用Linux环境变量

    bash shell用一个叫做环境变量的特性来存储有关shell会话和工作环境的信息. 全局环境变量 这对shell 会话和所有生成的子shell都是可见的.局部变量只对创建他们的shell可见. 系 ...

  5. nyoj_3:多边形重心问题（计算几何）

    基础的计算几何 多边形的n个顶点按*时针方向给出 由任意n边形可分解为n-2个三角形,各三角形面积面积与重心易得,故有各三角形的面积及重心 用重心公式可求得多边形的面积与重心 题目链接: http:/ ...

  6. 【Splay】例题

    营业额统计 题目背景 HNOI2002 DAY2 T2 题目描述 Tiger 最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger 拿出了公司 ...

  7. DDOS的攻击原理和如何防护网站和游戏恶意攻击

    DDOS的攻击原理和如何防护网站和游戏恶意攻击                 1-DDOS全名是Distribution Denial of Service (分布式拒绝服务攻击),很多DOS攻击源 ...

  8. FPGA计算3行同列数据之和

    实验:FPGA计算3行同列数据之和 实验要求:PC机通过串口发送3行数据(一行有56个数据,3行共有56*3=168个数据)给FPGA,FPGA计算3行同一列数据的和,并将结果通过串口返回给上位机. ...

  9. Zend Framework1 框架入门（针对Windows，包含安装配置与数据库增删改查）

    最近公司接的项目需要用到Zend Framework框架,本来需要用的是ZendFramework2 ,但是由于原有代码使用了ZendFramework1 框架,所以顺带学习了.现将一些基础入门记录一 ...

  10. Java Struts图片上传至指定文件夹并显示图片

    继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="mult ...