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


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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
ECMAScript 基础知识
2007/06/29 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
JS实现多选框的操作
2020/06/24 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python列表去重的二种方法
2014/02/14 Python
Python中的random()方法的使用介绍
2015/05/15 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python调用摄像头的示例代码
2020/09/28 Python
selenium如何定位span元素的实现
2021/01/13 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
大学生交通专业求职信
2014/09/01 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python