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


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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
微信小程序保存多张图片的实现方法
Mar 05 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
浅谈TypeScript的类型保护机制
Feb 23 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
基于php缓存的详解
2013/05/15 PHP
php pdo操作数据库示例
2017/03/10 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python rsa 加密解密
2017/03/20 Python
python分布式环境下的限流器的示例
2017/10/26 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
捐款倡议书范文
2014/02/02 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
好人好事演讲稿
2014/09/01 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
队名及霸气口号大全
2015/12/25 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript