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


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 相关文章推荐
20条学习javascript的编程规范的建议
Nov 28 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
js微信支付实现代码
Dec 22 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
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下MYSQL limit的优化
2008/01/10 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
详解小程序缓存插件(mrc)
2018/08/17 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
机电一体化专业应届本科生求职信
2013/09/27 职场文书
数学教学随笔感言
2014/02/17 职场文书
珠宝店促销方案
2014/03/21 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
goland 设置project gopath的操作
2021/05/06 Golang