上传前先预览_下载前先预览-CSDN博客

本文链接：https://blog.csdn.net/wskiigu/article/details/6430138

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ImagePreview</title>
    <style type="text/css">
        body
        {
            font-size: 12px;
            color: #414141;
        }
        #ul
        {
            padding: 0px;
            margin: 0px;
            border: solid 1px #ccc;
            list-style-type: none;
            line-height: 28px;
            width: 400px;
        }
        #ul li
        {
            border: solid 1px #ccc;
            border-top: solid 0px #ccc;
        }
        #divPreview
        {
            width: 200px;
            height: 150px;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
            border: solid 1px #ccc;
        }
        #liTop
        {
            font-size: 14px;
            text-align: center;
            background-color: #ccc;
        }
        #spMes
        {
            color: Red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ul id="ul">
        <li id="liTop">图片上传预览demo</li>
        <li>上传图片：<asp:FileUpload ID="fulImage" runat="server" /></li>
        <li style="float: left; clear: left;">图片预览：</li><li>
            <div id="divPreview">
            </div>
        </li>
        <li><span id="spMes"></span></li>
    </ul>
    </form>
</body>

function $(str){return document.getElementById(str);}

$("<%=fulImage.ClientID %>").οnchange=function()
{
    var imagePath=getPath($("<%=fulImage.ClientID %>"));
    displayView(false);
    try
    {
     var regex=/^^.*/.(?:jpg|gif|png)$/ig;
     if(regex.test(imagePath))
     {
     $("divPreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imagePath;
     }else
     {
      displayView(true);

     alert(imagePath .substr(imagePath.length));

     $("spMes").innerHTML="错误代号：002 图片格式不正确";
     }
    }catch(e)
    {
     displayView(true);
     $("spMes").innerHTML="错误代号：001"+e.message;
    }
}

// 获取本地上传的照片路径
function getPath(obj) {
    if (obj) {
        //ie
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
            obj.select();
            // 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;
    }
}