input上传图片显示预览信息

<!DOCTYPE html>

<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" });

        }

    </script>

</head>

<body>

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

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

</body>

</html>

var uploadPreview = function(setting) {

    /*

    *this(当前对象)

    */

    var _self = this;

    /*

    *判断为null或者空值

    */

    _self.IsNull = function(value) {

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

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

            return true;

        }

        return false;

    }

    /*

    *:默认配置

    */

    _self.DefautlSetting = {

        UpBtn: "",

        DivShow: "",

        ImgShow: "",

        Width: 100,

        Height: 100,

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

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

        callback: function() { }

    };

    /*

    *读取配置

    */

    _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

    };

    /*

    *获取文本控件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;

    }

    /*

    *绑定事件

    */

    _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();

            }

        }

    }

    /*

    *执行绑定事件

    */

    _self.Bind();

}

uploadPreview.js

/*

*插件作者:周祥

*插件介绍:图片上传本地预览插件

*插件网站:http://jquery.decadework.com

*作  者QQ:200592114

*/

var uploadPreview = function(setting) { var _self = this; _self.IsNull = function(value) { if (typeof (value) == "function") { return false; } if (value == undefined || value == null || value == "" || value.length == 0) { return true }; return false; }; _self.DefautlSetting = { UpBtn: "", DivShow: "", ImgShow: "", Width: 100, Height: 100, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种", callback: function() { } }; _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 }; _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; }; _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(); } } }; _self.Bind(); }

uploadPreview.min.js

input上传图片显示预览信息的更多相关文章

input 上传图片显示预览、调用摄像头，ios和Android的兼容性解决
html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...
input上传图片并预览
首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式大家都知道input在HTML的代码为 <input type="file&q ...
vue 利用原声input上传图片并预览并删除
<template> <div class="com-upload-img"> <div class="img_group"> ...
vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张参数名类型说明 fileTypes Array 文件类型, 默认 ...
js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
js上传图片及预览功能
详细内容请点击参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
jquery解决file上传图片+图片预览
js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...
Windows 10下Markdown不能显示预览
Windows 10下Markdown不能显示预览结局办法下载awesomium的SDK,安装后重启Markdown即可实测最新版本的SDK不行,建议安装1.6.6 下载地址:http://ww ...
关于asp.net mvc中 weiui gallery中IOS 下不显示预览图片问题的解决方式
IOS 下面不显示预览. 结果去掉了红框中的缓存部分就可以显示了备忘,也帮助一下需要的朋友 @*<meta http-equiv="pragma" content=&qu ...

随机推荐

django cycle标签
django 模板系统有很多标签,其中cycle我觉得不好理解,至少网上文档也不好理解. 这些标签可以通过渲染模板文件而获得我们预期的效果和文字,常用的有如下这些标签: 标签:{% 标签名 %}{% ...
JavaScript（1）
JavaScript(1) 第一次见到JavaScript的时候,看到了熟悉的"Java",原来都是骗人的,李鬼不是李逵呀=.= 然而发现这个东西还是特别实用的,和Java比起来它 ...
【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序（进程的虚拟存储器映像布局详解）
[翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .
mysql更改已有数据表的字符集，保留原有数据内容
mysql更改已有数据表的字符集,保留原有数据内容原文网址:http://blog.csdn.net/learn_2/article/details/6460370 环境:在应用开始阶段没有 ...
STORM_0004_windows下zookeeper的伪集群的搭建
-----------------------------------------------------START------------------------------------------ ...
hdu 4217 Data Structure? 树状数组求第K小
Data Structure? Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
HDU1045 Fire Net（DFS）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1045 Fire Net Time Limit: 2000/1000 MS (Java/Others) ...
chrome的input默认样式黄色背景以及选中加粗的边框处理
问题描述: chrome输入用户名和密码,然后浏览器自己有记忆功能,等再次登录的时候,他会显示chrome默认的黄色背景色,还有选中时周围会有很粗的边框解决方案: 去掉黄色背景,给input添加au ...
[转载] 一致性问题和Raft一致性算法
原文: http://daizuozhuo.github.io/consensus-algorithm/ raft 协议确实比 paxos 协议好懂太多了. 一致性问题一致性算法是用来解决一致性问题 ...
odoo中pos模块由于删除partner导致发生（你试图访问的单据已经删除）错误的解决方法
model.js文件中 push_order: function(order) { var self = this; if(order){ this.proxy.log('push_order',or ...

input上传图片 显示预览信息

input上传图片 显示预览信息的更多相关文章

随机推荐

热门专题

input上传图片显示预览信息

input上传图片显示预览信息的更多相关文章