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


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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
JScript中的条件注释详解
Apr 24 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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 getsiteurl()函数
2009/09/05 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php数组遍历类与用法示例
2019/05/24 PHP
js查错流程归纳
2012/05/04 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
销售内勤岗位职责
2015/02/10 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
汉字听写大会观后感
2015/06/12 职场文书
工作会议简报
2015/07/20 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js