<!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. [TYVJ1728/BZOJ3224]普通平衡树-替罪羊树

    Problem 普通平衡树 Solution 本题是裸的二叉平衡树.有很多种方法可以实现.这里打的是替罪羊树模板. 此题极其恶心. 前驱后继模块需要利用到rank模块来换一种思路求. 很多细节的地方容 ...

  2. Luogu 2245 星际导航（最小生成树，最近公共祖先LCA，并查集）

    Luogu 2245 星际导航(最小生成树,最近公共祖先LCA,并查集) Description sideman做好了回到Gliese 星球的硬件准备,但是sideman的导航系统还没有完全设计好.为 ...

  3. javaSE 第77节课

    1.InetAddress InetAddress是地址的封装类,也可通过它来获得当前的操作地址(1)获得电脑当前上网的IP地址 (2)与服务器连接操作 (3) 二.MD5加密文件 文件本地秒传操作例 ...

  4. （转）eclipse报错及解决说明 "XX cannot be resolved to a type "

    场景:在项目开发时,一个工程引用另一个工程中的文件,出现报错“XX cannot be resolved to a type”,但是在实际通过跟踪“F3”能够找到相应的文件,最终用方法4解决. 引言: ...

  5. (转)Java多线程编程总结

    -------------------------------------------------------------------------------------------------   ...

  6. SpringBoot系列一（入门，ORM，Transaction,log4j2等）

    今天写篇springboot的博客,主要介绍一下springboot搭建以及一些整合. 首先介绍springboot搭建,我今天选择Maven,想用Gradle搭建的就自己百度一下吧,访问" ...

  7. 【python】字符排序

    一.摘要 最近在做一个排序的东西,被python的字符串编码格式折腾了一会儿,总结下 二.排序 英文排序不用说,sort sorted 比较好,内部已经实现 主要是中文,方法是查表获取拼音再进行排序. ...

  8. Android学习笔记- ButterKnife 8.0注解使用介绍

    前言: App项目开发大部分时候还是以UI页面为主,这时我们需要调用大量的findViewById以及setOnClickListener等代码,控件的少的时候我们还能接受,控件多起来有时候就会有一种 ...

  9. ASP.NET前台table通过Ajax获取绑定后台查询的json数据

    上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax  J ...

  10. linux下删除文件及文件夹命令

    一.删除空文件与文件夹 rm或rmdir 文件/文件夹 二.删除非空文件与文件夹 rm -rf 文件/文件夹