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


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 相关文章推荐
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
百度小程序自定义通用toast组件
Jul 17 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
JavaScript 反射学习技巧
Oct 16 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实现MySQL更新记录的代码
2008/06/07 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
Angular工具方法学习
2016/12/26 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
50道外企软件测试面试题
2014/08/18 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
中学教师岗位职责
2013/11/26 职场文书
关于爱情的广播稿
2014/01/16 职场文书
美德好少年事迹材料
2014/01/19 职场文书
公司演讲稿开场白
2014/08/25 职场文书
初中毕业生感言
2015/07/31 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
总结几个非常实用的Python库
2021/06/26 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
SQL SERVER中的流程控制语句
2022/05/25 SQL Server