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 ...

随机推荐

5-JS函数
函数定义函数 JS中有3种定义函数的方法: 函数声明用函数声明定义函数的方式如下: function abs(x) { if (x >= 0) { return x; } else { re ...
SqlSever基础 union 联合查询，厉害的并集重复项只显示一个两个查询结果并在一起后排序
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
uTenux——软件底层驱动组织结构介绍
经过第一节对uTenux初步认识和第二节对uTenux\AT91SAM3S4C开发板的硬件结构的介绍,这一节我们将要学习的是uTenux\AT91SAM3S4C的软件底层驱动. 在悠龙公司的官网或者u ...
Hibernate+Struts2+jsp 修改用户信息
在用户列表页面点击修改,进入修改页面修改薪酬为555,点击提交,重新跳回该页面修改成功关键代码如下基层的代码,这里增加了一个根据用户id查询的方法 dao层 //修改 public USer ...
BeagleBone Black– 智能家居控制系统 LAS - ESP8266 UDP 服务
NodeMCU 的文档里面终于发现,ESP8266 的GPIO 2 确实是 PIN 4,GPIO 0 是 PIN 3. https://github.com/nodemcu/nodemcu-firmw ...
JS——ajax login test
1.新建一个webproject,我用的是myeclipse10,建立如下的LoginServlet.java文件 2.编写java文件 import java.io.IOException; imp ...
TestNg测试框架使用笔记
Gradle支持TestNG test { useTestNG(){ //指定testng配置文件 suites(file('src/test/resources/testng.xml')) } } ...
Deep Learning: Activation Function
Sigmoid Function ReLU Function Tanh Function
Python基础学习笔记（八）常用字典内置函数和方法
参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-dictionary.html 3. http://www.lia ...
delegate基于on
前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看源码发现bind()和delegate()都是由on()实现的,感兴趣的朋友可 ...

input上传图片 显示预览信息

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

随机推荐

热门专题

input上传图片显示预览信息

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