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


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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
javascript事件监听与事件委托实例详解
Aug 16 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
10款实用的PHP开源工具
2015/10/23 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
浅谈js中的闭包
2015/03/16 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
django+js+ajax实现刷新页面的方法
2017/05/22 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
高中生学期学习自我评价
2014/02/24 职场文书
教师师德演讲稿
2014/05/06 职场文书
岗位说明书标准范本
2014/07/30 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS