<!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. 面向对象15.3String类-常见功能-获取-2

    public class String_APImethod {/* * 1.4获取字符串中的一部分字符串,也叫字符串 * String substring(int beginIndex, int en ...

  2. hihocoder 1050 树中的最长路（动态规划，dfs搜索）

    hihocoder 1050 树中的最长路(动态规划,dfs搜索) Description 上回说到,小Ho得到了一棵二叉树玩具,这个玩具是由小球和木棍连接起来的,而在拆拼它的过程中,小Ho发现他不仅 ...

  3. Win10系统下安装Oracle服务器和Oracle客户端

    工作电脑从Win7换为Win10,在给Win10系统安装Oracle时花费了很长世间终于搞定,在此给大家分享下. 1.工作中需要连接测试环境.生产环境Oracle,所以安装了公司封装的Oracle客户 ...

  4. 号称精通Java的你，是否真的名副其实

    慎用精通 随着猎头行业的兴盛,一些应聘者往往可以从猎头那得到一些注意事项和过往经验.比如,在简历中切不可随意用上"精通"二字,尤其对于刚入职场的小伙伴. 因为,对于应聘者写上精通和 ...

  5. 数据库sql优化方案

    声明:这个不是我自己写的,是我们老师给我,我拿出来分享一下! 为什么要优化:     随着实际项目的启动,数据库经过一段时间的运行,最初的数据库设置,会与实际数据库运行性能会有一些差异,这时我们    ...

  6. Unity编辑器重写Inspector面板，面板中编辑的数据不触发场景发生变化的问题。

    今天开始协助主程一起制作新框架.主程让我写关于新版UI框架注册UI预制体用的快捷编辑器. 现学现写,总算完成了. 可以直接把选中的预制体添加到UIController的数组中,期间涉及到改变大小.所以 ...

  7. （转）eclipse安装jetty

    背景:在项目开发的过程中,一个老的项目使用的是jetty启动,在用tomcat启动的过程中出现了启动不了的异常,浪费了好多时间.因为项目一直是用jetty启动的,为了不浪费时间,也只好改变思路选择je ...

  8. JS浏览器对象：window对象、History、Location对象、Screen对象

    一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...

  9. Java第四次上课博文动手动脑

    Java第四次上课博文动手动脑 1.    查看String.equals()方法 public class StringEquals { /** * @param args the command ...

  10. file-API 实现添加图片 预览缩略图（自己学习）

    首先看看 "效果图" : 我们最终实现的就是点击右侧的"相机"按钮添加想要添加的图片然后可以根据需要删除(点叉删除本条)或再次添加图片,并显示缩略图....走起 ...