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


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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 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
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python pandas生成时间列表
2019/06/29 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python新手学习raise用法
2020/06/03 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
老教师工作总结的自我评价
2013/09/27 职场文书
护士演讲稿范文
2014/01/05 职场文书
小区门卫值班制度
2014/01/24 职场文书
体育之星事迹材料
2014/05/11 职场文书
南京青奥会口号
2014/06/12 职场文书
应届毕业生自荐书
2014/06/18 职场文书
杭白菊导游词
2015/02/10 职场文书
2015年纪委工作总结
2015/05/13 职场文书
生产设备维护保养制度
2015/08/06 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
利用python进行数据加载
2021/06/20 Python
Android实现图片九宫格
2022/06/28 Java/Android