<!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. 使用URLConnection调用axis1.4开发的webservice

    写在前面: 调用webservice的方式有很多:1.直接在客户端使用工具生成客户端代码,将代码拷进项目中调用即可:2.使用对应的webservice框架来进行调用,比如如果我们我的服务端开发用的是a ...

  2. js实现日期显示的一些操作

    1.js获取当前日期(yyyy-mm-dd) 以下代码是获取到的当前日期: var myDate = new Date(); var year = myDate.getFullYear(); //获取 ...

  3. iBatis一些非见用法（相当实用）

     兼顾效率,iBatis一些非见用法(10条) 2009-09-18 10:33:03 标签:iBatis 休闲 职场 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声 ...

  4. 花了一年时间开发的TTFEditor 字体编辑器

    TTF(True Type Font)字库是微软定义的基于windows的标准字库格式.但其由于专利保护以及无法跨平台导致TTF字库在实际应用中无法有效使用. 为此我推出TTFEditor字体编辑软件 ...

  5. excel下拉级联的做法

    前面的文章讲了,excel下拉级联,重新选第一个下拉,后面那个值怎么清除.今天我讲下excel利用宏解决整个表格的级联下拉问题. 我遇到的情况是两个下垃圾连,第一个医生类别,第二个医生职称,而且我是要 ...

  6. python--爬虫--利用cookie登录网络教学中心刷评论

    声明:本文仅供学习参考 这个功能终于实现了,如果请求太快,很容易被系统发现(输入验证码)所以没用多线程 对于cookie的获取采取手动方式,也可以尝试从浏览器获取cookie,cookie需要转化为字 ...

  7. Spring+SpringMVC+MyBatis+easyUI整合进阶篇(二)RESTful API实战笔记(接口设计及Java后端实现)

    写在前面的话 原计划这部分代码的更新也是上传到ssm-demo仓库中,因为如下原因并没有这么做: 有些使用了该项目的朋友建议重新创建一个仓库,因为原来仓库中的项目太多,结构多少有些乱糟糟的. 而且这次 ...

  8. 七月SSL行业新闻回顾

    大事件一:被泄露的私钥和基于假私钥进行的撤回 上个月,我们报告说Spotify和Cisco在应用程序中捆绑了有效证书的私钥.这些证书将根据基准要求被撤销,但应用程序不是泄露私钥的唯一来源.Koen R ...

  9. B趣味求和

    编写一个程序,求Sn=a+aa+aaa+--+aa-aaa(有n个a)的值,其中a是一个数字. Input 输入数据含有不多于50组的数据,每组数据由两个正整数(0<a, n < 10)组 ...

  10. Luogu P1451 求细胞数量

    题目描述 一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右若还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数.(1<=m,n<=100)? 输入输出格式 输 ...