<!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. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

  2. java定时任务的实现方式

    在本文里,我会给大家介绍2种不同的实现方法:1.普通thread实现2.ScheduledExecutorService实现 一:实现普通的thread: 首先是创建thread然后就是一直让whil ...

  3. 以图像分割为例浅谈支持向量机(SVM)

    1. 什么是支持向量机?   在机器学习中,分类问题是一种非常常见也非常重要的问题.常见的分类方法有决策树.聚类方法.贝叶斯分类等等.举一个常见的分类的例子.如下图1所示,在平面直角坐标系中,有一些点 ...

  4. Jenkins中的一些问题解决（~~不断更新~~）

    请使用ctrl+F,查询页面中你需要查找的错误信息(注意空格的输入) 1.错误"error fetching remote repo origin" 本地有多个sshkey,导致构 ...

  5. ES6中的迭代器(Iterator)和生成器(Generator)

    前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简 ...

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

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

  7. R语言 write.xlsx() 写入同一excel，及同一sheet注意

    write.xlsx(x, file, sheetName="Sheet1", col.names=TRUE, row.names=TRUE, append=FALSE, show ...

  8. seajs的模块化开发--实践笔记

    2017-04-02 SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.有效的解决复杂项目中命名冲突.依赖.性能等问题. SeaJS ...

  9. 程序设计入门——C语言 习题汇总

    <img width="108" height="40" alt="浙江大学" src="http://imgsize.ph ...

  10. MySQL-InnoDB引擎

    InnoDB存储引擎支持事务,其设计目标主要面向在线事务(OLTP)应用,其特点是: 行锁设计,支持外键,并支持类似于Oracle的非锁定读,即默认读取操作不会产生锁,从MySQL5.5.8 开始,I ...