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


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 相关文章推荐
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
JavaScript中this详解
Sep 01 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
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
DC动漫人物排行
2020/03/03 欧美动漫
php实例分享之二维数组排序
2014/05/15 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP经典面试题集锦
2015/03/19 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
Prototype String对象 学习
2009/07/19 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
python操作CouchDB的方法
2014/10/08 Python
Python中的引用和拷贝浅析
2014/11/22 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
pandas 数据类型转换的实现
2020/12/29 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
致跳远、跳高运动员广播稿
2014/01/09 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
财务管理制度范本
2015/08/04 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby