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


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 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 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在字符串中查找另一个字符串
2008/11/19 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php中使用GD库做验证码
2016/03/31 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
javascript demo 基本技巧
2009/12/18 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
关于python多重赋值的小问题
2019/04/17 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python logging模块的使用总结
2019/07/09 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
Structs界面控制层技术
2013/10/11 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
内容编辑个人求职信
2013/12/10 职场文书
医院总经理职责
2013/12/26 职场文书
技校毕业生自荐书
2014/05/23 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书