图片上传-预览

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>javascript实现图片上传本地预览图片的代码-php自学网</title>
    <script type="text/javascript">
        function checkFiles(str, exStr) {
            if (typeof (exStr) == 'undefined')
                exStr = ".jpg|.png|.gif|.jpeg";
            var strRegex = "(" + exStr + ")$"; //用于验证图片扩展名的正则表达式
            var re = new RegExp(strRegex);
            if (re.test(str.toLowerCase())) {
                return true;
            }
            else {
                alert("文件名不合法,文件的扩展名必须为" + exStr + "格式");
                return false;
            }
        }

        //兼容IE6,IE7,IE8和Firefox的图片上传预览效果 By Zmor
        function PreviewPic(id, obj) {
            debugger;
           var picPath = getFullPath(obj);
            if (checkFiles(obj.value))
                document.getElementById("Image1").src = picPath;
        }

        function getFullPath(obj) {
            if (obj) {
                //IE
                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    obj.select();
                    obj.blur();
                    // IE下取得图片的本地路径
                    return document.selection.createRange().text;
                }
                //firefox
                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    if (obj.files) {
                        // Firefox下取得的是图片的数据
                        return obj.files.item(0).getAsDataURL();
                    }
                    return obj.value;
                }
                return obj.value;
            }
        }

    </script>
</head>
<body>
    <div>
        <input name="imgfile" type="file" id="imgfile" size="40" onchange="javascript:PreviewPic('Image1',this);" />
    </div>
    <div>
        <img alt="" src="" id="Image1" />
    </div>
</body>
</html>
posted @ 2015-06-16 16:48 Deeper Love 阅读(288) 评论(0) 收藏举报
刷新页面返回顶部