图片上传判断及预览脚本的效果实例


Posted in Javascript onAugust 07, 2013
<div id="imgbox">
    <img id="imghead" src="img/no_photo.gif" alt="" width="100" height="125" />
    </div>
<asp:FileUpload ID="FileUploadImg" runat="server" onchange='previewImage(this);' 
                            style="position:relative;left:-130px;cursor:pointer;"/>
var $$ = function(id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};
/*
图片验证
*/
//验证上传图片格式
function checkupload(ele) {
    var obj = $$("FileUploadImg");
    var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:)    
    if (fileContentType == 'gif' || fileContentType == 'jpeg' || fileContentType == 'png' || fileContentType == 'jpg') {
        //验证上传图片大小
        return checkFileSize(ele);
    } else {
        alert('上传文件格式不正确!');
        return false;
    }
    return false;
}
//验证上传图片大小
function checkFileSize(ele) {
    var maxSize = 100 * 1024;
    //ie
    if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
        var fso;
        try {
            fso = new ActiveXObject('Scripting.FileSystemObject');
            var file = fso.GetFile(ele.value);
            //alert(file.Size);
            return file.Size < maxSize;
        } catch (e) {
            alert("浏览器设置禁用ActiveXObject控件,请启用");
            return false;
        }
    }
    //firefox
    else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
        //alert(ele.files[0].fileSize);
        return ele.files[0].fileSize < maxSize;
    }
    return false;
}
//加载预览图片
function previewImage(ele) {
    if (ele && checkupload(ele)) {
        var imgDiv = $$("imgbox");
        imgDiv.innerHTML = "";
        imgDiv.style.width = "100px";
        imgDiv.style.height = "125px";
        //ie
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
            imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
            imgDiv.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = ele.value;
        }
        //firefox
        else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
            imgDiv.innerHTML = "<img width='" + 100 + "' height='" + 125 + "' id='aPic' src='" + ele.files.item(0).getAsDataURL() + "'>";
        } else {
            imgDiv.innerHTML = "<span style='color:red;'>IE/火狐浏览器才支持图片预览</span>";
        }
    } else {
        $$("FileUploadImg").value = "";
        $$("imgbox").innerHTML = "<img id='imghead' src='img/no_photo.gif' alt='' width='100' height='125' />";
        //alert('重置上传控件');
    }
}
Javascript 相关文章推荐
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
Vue异步加载about组件
Oct 31 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
探索node之事件循环的实现
Oct 30 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
Javascript alert消息换行的方法
Aug 07 #Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 #Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 #Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 #Javascript
JS常见问题整理(持续更新)
Aug 06 #Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 #Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 #Javascript
You might like
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
python解析xml模块封装代码
2014/02/07 Python
Python中集合类型(set)学习小结
2015/01/28 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
python事件驱动event实现详解
2018/11/21 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
法制报告会主持词
2014/04/02 职场文书
代理人委托书
2014/08/01 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
政协会议宣传标语
2014/10/09 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
教师外出学习心得体会
2016/01/18 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
MySQL 逻辑备份 into outfile
2022/05/15 MySQL