首页 > 程序开发 > web前端 > JavaScript > 正文
javascript图片上传格式验证,缩略图预览呈现,兼容IE,FIREFOX
2011-09-07       个评论      
收藏    我要投稿

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        var picPath;
        var image;
        var box;

        //只要调用这个方法就可以了,参数(this,这里为显示的位置)
        function LoadImage(ele, show_pos_obj) {
            picPath = GetImgPath(ele);
            if (picPath != "" && picPath != null) {
                image = new Image();
                image.src = picPath;
                box = GetObj(show_pos_obj);
                box.innerHTML = "<span style='color:gray;font-size:11px'>加载中...</span>";
                setTimeout(ImgView, 1000);
            } else {
                return false;
            }
        }

        //呈现图片视图
        function ImgView() {
            if (image.width == 0 || image.height == 0) {
                settimeout(ImgView, 1000);
            } else {
                if (box != null) {
                    var imgWidth = (image.width >= box.offsetWidth) ? box.offsetWidth : image.width;
                    var imgHeight = (image.height >= box.offsetHeight) ? box.offsetHeight : image.height;
                    var alt = "图片实际尺寸为:" + image.width + "&nbsp;*&nbsp;" + image.height;
                    box.innerHTML = "<img width='" + imgWidth + "' height='" + imgHeight + "' id='apic' src='" + picPath + "' onload='DrawImage(this," + box.offsetWidth + "," + box.offsetHeight + ")' title=" + alt + " />";
                }
            }
        }

        //获取IE,FF下图片的路径
        function GetImgPath(obj) {
            if (ValidateImgUrl(obj)) {
                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    obj.select();
                    return document.selection.createRange().text;
                }
                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    if (obj.files) {
                        return obj.files.item(0).getAsDataURL();
                    }
                    return obj.value;
                }
                return obj.value;
            }
        }

        //图片格式验证
        function ValidateImgUrl(obj) {
            var url = GetObj(obj).value;
            var filename = url.substring(url.lastIndexOf(".") + 1).toLowerCase();
            if (filename != "jpg" && filename != "gif" && filename != "png" && filename != "bmp" && filename != "jpeg") {
                alert("图片格式有误,请选择jpg|gif|png|bmp格式的图片上传"); return false;
            }
            if (url.length > 0) {
                //return document.getElementById(id).value;
                return true;
            }
            else { return false; }
        }

        function GetObj(id) {
            return "string" == typeof id ? document.getElementById(id) : id;
        }

        //图片按比例缩放
        var flag = false;
        function DrawImage(ImgD, iwidth, iheight) {
            //参数(图片,允许的宽度,允许的高度)
            var image = new Image();
            image.src = ImgD.src;
            if (image.width > 0 && image.height > 0) {
                flag = true;
                if (image.width / image.height >= iwidth / iheight) {
                    if (image.width > iwidth) {
                        ImgD.width = iwidth;
                        ImgD.height = (image.height * iwidth) / image.width;
                    } else {
                        ImgD.width = image.width;
                        ImgD.height = image.height;
                    }
                } else {
                    if (image.height > iheight) {
                        ImgD.height = iheight;
                        ImgD.width = (image.width * iheight) / image.height;
                    } else {
                        ImgD.width = image.width;
                        ImgD.height = image.height;
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="file" name="pic" id="pic" onchange='LoadImage(this,"box")' />
    <div id='box' style="width: 300px; height: 300px">
    </div>
</body>
</html>

作者“ly1577592799的专栏”

点击复制链接 与好友分享!回本站首页
相关TAG标签 格式 图片
上一篇:JS event对象,简单描述
下一篇:js页面传变量值
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站