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


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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
AngularJS中的模块详解
Jan 29 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
js模拟实现烟花特效
Mar 10 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小教程之实现双向链表
2014/06/12 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
Python实现合并字典的方法
2015/07/07 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Selenium定位元素操作示例
2018/08/10 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
自荐信结尾
2013/10/27 职场文书
外贸专业求职信
2014/03/09 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
新闻传播专业求职信
2014/07/22 职场文书
师德师风的心得体会
2014/09/02 职场文书
党章培训心得体会
2014/09/04 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
zabbix配置nginx监控的实现
2022/05/25 Servers