javascript圖片上傳格式驗證,縮略圖預覽呈現,兼容IE,FIREFOX

<!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")' />
    <p id='box' style="width: 300px; height: 300px">
    </p>
</body>
</html>

作者“ly1577592799的專欄”

You May Also Like