BS中利用JS控制页面显示本地图片，自己封装的控件。

最近做一个系统时，在人员信息采集的时候。遇到将人员照片采集上。想试下选择本地照片然后可以再网页上显示。在网上搜索了诸多材料，然后根据前辈们的总结。封装了一个控件。

下面说一下控件页面。我想点击一下button按钮。然后即可使用fileupload选取照片，然后根据此路径显示本地图片。下面直接粘贴代码，直接将此代码复制到新建的用户控件就可以使用。

页面HTML代码：

<table align="left" width="100%" height="100%" border="0">
    <tr>
        <td id="WebPic" runat="server">
            <asp:Image ID="imgShow" runat="server" ImageUrl="#" Height="98px" Width="70px"></asp:Image>
        </td>
        <td id="LocalPic" runat="server">
            <div id="imgsrc">
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input id="btnImg" style="width: 136px; height: 24px" type="button" value="选择照片"
                name="btnImg" runat="server" onmouseover="movebtnFile(this)" />
            <input id="btnFile" type="file" name="btnFile" runat="server" onchange="CheckImage(this);"
                style="filter: alpha(opacity=0); width: 30px; position: absolute" />
        </td>
    </tr>
</table>

页面上的JS代码：

<script language="jscript" type="text/jscript">
    var ImageUrl = null;
    function CheckImage(e) {
        var prefix = e.id.substring(0, e.id.indexOf("_btnFile"));
        if (ImageUrl == null) {
            ImageUrl = document.all(prefix + "_imgShow").src;
        }
        if (document.all(prefix + "_btnFile").value.length > 0) {
            document.getElementById(prefix + "_WebPic").style.display = "none";
            document.getElementById(prefix + "_LocalPic").style.display = "block";
            PreviewImg(prefix + "_btnFile")
        }
    }
    function SelectImage(e) {
        document.all(prefix + "_btnFile").click();
        if (document.all(prefix + "_btnFile").value.length == 0)
            return;
        document.all(prefix + "_imgShow").src = document.all(prefix + "_btnFile").value;
    }
    function movebtnFile(e) {

        var prefix = e.id.substring(0, e.id.indexOf("_btnImg"));

        var btn = document.all(prefix + "_btnFile");


        btn.style.offsetTop = event.srcElement.offsetTop;
        var x = event.x - btn.offsetWidth / 2;
        if (x < event.srcElement.offsetLeft) {
            x = event.srcElement.offsetLeft;
        }
        /*
        if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-btn.offsetWidth)
        {
        x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-btn.offsetWidth
        }
        */
        btn.style.posLeft = x;
    }


    function getPath(obj) {
        if (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 PreviewImg(imgFile) {

        //新的预览代码，支持 IE6、IE7。
        var upFile = document.getElementById(imgFile);
        var imgsrc = document.getElementById("imgsrc");


        imgsrc.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
        imgsrc.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = getPath(upFile);

        imgsrc.style.width = "70px";
        imgsrc.style.height = "98px";

    }
</script>

封装的控件，就可以通过button选择照片。然后显示本地图片。