小小的几十行代码，很牛逼，很实用。

支持多个图片的预览，只要new多个对象就行了。

html如下

<!-- zhouxiang www.zhou-xiang.com -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>uploadPreview演示</title>

    <script src="uploadPreview.js" type="text/javascript"></script>

    <script>

       window.onload = function () {

            new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });

            new uploadPreview({ UpBtn: "up_img2", DivShow: "imgdiv2", ImgShow: "imgShow2" });

        }

    </script>

</head>

<body>

    <div id="imgdiv"><img id="imgShow" width="200"/></div>

    <input type="file" id="up_img" />

    <div id="imgdiv"><img id="imgShow2" width="200" /></div>

    <input type="file" id="up_img2" />

</body>

</html>

插件代码如下

/*

*发布时间:2014年12月12日

*插件介绍:图片上传本地预览插件 兼容浏览器(IE 谷歌 火狐) 不支持safari 当然如果是使用这些内核的浏览器基本都兼容

*使用方法:

*界面构造(IMG标签外必须拥有DIV 而且必须给予DIV控件ID)

* <div id="imgdiv"><img id="imgShow" width="120" height="120" /></div>

* <input type="file" id="up_img" />

*调用代码:

* new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" });

*参数说明:

*UpBtn:选择文件控件ID;

*DivShow:DIV控件ID;

*ImgShow:图片控件ID;

*Width:预览宽度;

*Height:预览高度;

*ImgType:支持文件类型 格式:["jpg","png"];

*callback:选择文件后回调方法;

*版本:v1.4

更新内容如下:

1.修复回调.

*版本:v1.3

更新内容如下:

1.修复多层级框架获取路径BUG.

2.去除对jquery插件的依赖.

*/

/*

*work:图片预览插件

*/

var uploadPreview = function(setting) {

    /*

    *work:this(当前对象)

    */

    var _self = this;

    /*

    *work:判断为null或者空值

    */

    _self.IsNull = function(value) {

        if (typeof (value) == "function") { return false; }

        if (value == undefined || value == null || value == "" || value.length == 0) {

            return true;

        }

        return false;

    }

    /*

    *work:默认配置

    */

    _self.DefautlSetting = {

        UpBtn: "",

        DivShow: "",

        ImgShow: "",

        Width: 100,

        Height: 100,

        ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],

        ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",

        callback: function() { }

    };

    /*

    *work:读取配置

    */

    _self.Setting = {

        UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,

        DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,

        ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,

        Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,

        Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,

        ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,

        ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,

        callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback

    };

    /*

    *work:获取文本控件URL

    */

    _self.getObjectURL = function(file) {

        var url = null;

        if (window.createObjectURL != undefined) {

            url = window.createObjectURL(file);

        } else if (window.URL != undefined) {

            url = window.URL.createObjectURL(file);

        } else if (window.webkitURL != undefined) {

            url = window.webkitURL.createObjectURL(file);

        }

        return url;

    }

    /*

    *work:绑定事件

    */

    _self.Bind = function() {

        document.getElementById(_self.Setting.UpBtn).onchange = function() {

            if (this.value) {

                if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {

                    alert(_self.Setting.ErrMsg);

                    this.value = "";

                    return false;

                }

                if (navigator.userAgent.indexOf("MSIE") > -1) {

                    try {

                        document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);

                    } catch (e) {

                        var div = document.getElementById(_self.Setting.DivShow);

                        this.select();

                        top.parent.document.body.focus();

                        var src = document.selection.createRange().text;

                        document.selection.empty();

                        document.getElementById(_self.Setting.ImgShow).style.display = "none";

                        div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                        div.style.width = _self.Setting.Width + "px";

                        div.style.height = _self.Setting.Height + "px";

                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;

                    }

                } else {

                    document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);

                }

                _self.Setting.callback();

            }

        }

    }

    /*

    *work:执行绑定事件

    */

    _self.Bind();

}

js图片预览插件，不涉及上传的更多相关文章

  1. h5 js 图片预览并判断 ajax上传

    //建立一個可存取到該file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != unde ...

  2. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  3. Vue.js图片预览插件

    vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...

  4. js实现图片预览、压缩、上传

    先看几个对象:Blob.ArrayBuffer.File.fileReader.formData 详细解释请参考:https://www.cnblogs.com/youhong/p/10875190. ...

  5. Viewer.js 图片预览插件使用

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...

  6. 适用于移动端、PC 端 Vue.js 图片预览插件

    1.安装:npm install --save vue-picture-preview 2.使用: (1)入口文件中main.js中全局引入: import Vue from 'vue' import ...

  7. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  8. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

  9. eclipse 图片预览插件

      eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...

随机推荐

  1. Windows2012中Python2.7.11+Python3.4.4+Pycharm

    下载软件包 Python2.7.11:  https://www.python.org/ftp/python/2.7.11/python-2.7.11.amd64.msi Python3.4.4:   ...

  2. codeforces 580D Kefa and Dishes(状压dp)

    题意:给定n个菜,每个菜都有一个价值,给定k个规则,每个规则描述吃菜的顺序:i j w,按照先吃i接着吃j,可以多增加w的价值.问如果吃m个菜,最大价值是多大.其中n<=18 思路:一看n这么小 ...

  3. jquery.qrcode和jqprint的联合使用，实现html生成二维码并打印（中文也ok）

    在公司的生产现场中,常常会在一些部品或设备上贴上二维码,用于扫描录入数据,免去手动输入的麻烦. 以前曾经做过winform的程序,生成二维码,并打印出来,使用的是zxing的类库, 但是如果二维码是附 ...

  4. [Excel] C# ExcelHelper操作类 (转载)

    点击下载 ExcelHelper.rar 主要功能如下1.导出Excel文件,自动返回可下载的文件流 2.导出Excel文件,转换为可读模式3.导出Excel文件,并自定义文件名4.将数据导出至Exc ...

  5. Activity以singleTask模式启动，intent传值的解决办法

    转载请注明出处,谢谢http://blog.csdn.net/harryweasley/article/details/46557827 因为项目中,有一个消息推送的功能,每次推送一个消息,就会开启F ...

  6. Android本地JUnit Text

    Android本地JUnit Text 步骤 创建一个和source文件,里面添加和src目录相同的包. 在AndroidManifest.xml文件manifest根节点添加如下文件 <ins ...

  7. 额定能量不得超过160Wh, 等同是多少mAh电池容量?

    额定能量不得超过160Wh, 等同是多少mAh电池容量?行动电源容量标示, 正确应该是用Whr(Wh)瓦特小时来标示, 不过坊间标榜行动电源的容量通常是用xx000mAhWHr瓦特小时, 即是行动电源 ...

  8. 三角网格(Triangle Mesh)的理解

    最简单的情形,多边形网格不过是一个多边形列表:三角网格就是全部由三角形组成的多边形网格.多边形和三角网格在图形学和建模中广泛使用,用来模拟复杂物体的表面,如建筑.车辆.人体,当然还有茶壶等.图14.1 ...

  9. angular 实例笔记之嵌套指令间的传参

    最近在项目中遇到了需要嵌套指令的情况,指令在嵌套后子指令必须获得父指令中的数据来进行判断,但是在写传参的时候遇到了坑,因此记录下来,防止以后遗忘,个人的肤浅理解,欢迎大家留言讨论 首先,关于direc ...

  10. MyEclipse使用经验总结

    0.快捷键 ================================================================================ 编辑: Ctrl+Shif ...