图片预览功能

最新推荐文章于 2024-02-21 19:16:26 发布

一个达不刘先生

最新推荐文章于 2024-02-21 19:16:26 发布

阅读量173

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/illlllllllllll/article/details/107407655

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片预览</title>
    <style>
        #main {
            width: 900px;
            height: 600px;
            margin: 10px auto 0;
        }

        #preview_text {
            width: 900px;
            height: 40px;
        }

        #preview_wrapper {
            width: 900px;
            height: 500px;
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="preview_text" class="preview_text">
            选择文件 : <input type="file" name="imageFile" id="imageFile" onChange="toShowPic()" />
            文件名 : <input type="text" name="fileName" id="fileName" value="" />
        </div>

        <div id="preview_wrapper">
            <img id="preview" src="image/blank.gif" /><br /><!-- 图片占位符 -->
        </div>
    </div>
</body>

<script>
    var DIV_ID = "preview";// div
    var PREVIEW_ID = "preview_wrapper";
    var PIC_WIDTH = 900;// 展示图片的宽度
    var PIC_HEIGHT = 500;// 展示图片的高度
    var FILE_NAME = "fileName";
    var IMAGE_FILE = "imageFile";
    function $$(id) {// 为了方便起见，统一定义一个函数
        return document.getElementById(id);
    }

    function toShowPic() {
        doPreview();
        setImageName();
    }

    // 设置图片名称
    function setImageName() {
        var name = $$(IMAGE_FILE).value;
        $$(FILE_NAME).value = name.substring(name.lastIndexOf('\\') + 1, name.lastIndexOf("."));
    }

    // 预览
    function doPreview() {
        var sender = $$(IMAGE_FILE);
        var allowExtention = ".jpg,.bmp,.gif,.png";// 图片支持的格式
        var extention = sender.value.substring(sender.value.lastIndexOf(".") + 1).toLowerCase();// 文件的扩展名
        var browserVersion = window.navigator.userAgent.toUpperCase();// 浏览器版本

        if (allowExtention.indexOf(extention) != -1) {// 包含指定的几种文件类型
            if (browserVersion.indexOf("MSIE") > -1) {// IE 浏览器
                if (browserVersion.indexOf("MSIE 6.0") > -1) {// ie6
                    $$(DIV_ID).setAttribute("src", sender.value);
                } else {// ie[7-8]、ie9
                    sender.select();
                    var newPreview = $$(PREVIEW_ID + "New");
                    if (newPreview == null) {
                        newPreview = document.createElement("div");
                        newPreview.setAttribute("id", PREVIEW_ID + "New");
                        newPreview.style.width = PIC_WIDTH;
                        newPreview.style.height = PIC_HEIGHT;
                        newPreview.style.border = "solid 1px gray";
                    }
                    newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                    var tempDivPreview = $$(PREVIEW_ID);

                    tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
                    tempDivPreview.style.display = "none";
                }
            } else if (browserVersion.indexOf("FIREFOX") > -1) {// 火狐浏览器
                var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);

                if (firefoxVersion < 7) {// firefox7以下版本
                    $$(PREVIEW_ID).setAttribute("src", sender.files[0].getAsDataURL());
                } else {//firefox7.0+    
                    $$(DIV_ID).setAttribute("src", window.URL.createObjectURL(sender.files[0]));
                }
            } else if (sender.files) {
                //兼容chrome、火狐等，HTML5获取路径       
                if (typeof FileReader != "undefined") {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $$(DIV_ID).setAttribute("src", e.target.result);
                        $$(DIV_ID).setAttribute("width", PIC_WIDTH);
                        $$(DIV_ID).setAttribute("height", PIC_HEIGHT);
                    };
                    reader.readAsDataURL(sender.files[0]);
                } else if (browserVersion.indexOf("SAFARI") > -1) {
                    alert("暂时不支持Safari浏览器!");
                }
            } else {
                $$(PREVIEW_ID).setAttribute("src", sender.value);
            }
        } else {
            sender.value = ""; // 清空选中文件
            $$(FILE_NAME).value = "";
            alert("仅支持以" + allowExtention + "为后缀的文件!");
            if (browserVersion.indexOf("MSIE") > -1) {// IE浏览器
                sender.select();
                document.selection.clear();
            }
            sender.outerHTML = sender.outerHTML;
        }
    }

</script>

</html>

一个达不刘先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片预览功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片预览</title> <style> #main { w
复制链接

扫一扫