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


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的简单实现折叠菜单代码
Sep 15 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
js css自定义分页效果
Feb 24 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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抓取https的内容的代码
2010/04/06 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
Python多线程学习资料
2012/12/19 Python
Python 转义字符详细介绍
2017/03/21 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python解析xml简单示例
2019/06/21 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
python 将Excel转Word的示例
2021/03/02 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
PHP中->和=>的意思
2021/03/31 PHP