FileUpload上传图片预览

来源：互联网发布：炉石diy软件编辑：程序博客网时间：2024/05/21 03:28

前台：

<head runat="server">
    <title></title>
    <style type="text/css">
#newPreview
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
</style>
    <script language="javascript" type="text/javascript">
        function show(url) {
            var imgserver = document.getElementById("Image1");
            imgserver.style.display = 'none';
            var newPreview = document.getElementById("newPreview");
            newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
            newPreview.style.width = "80px";
            newPreview.style.height = "60px";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">

            <asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click" />

<div id="newPreview">
    <asp:Image ID="Image1" runat="server" Height="214px" Width="236px" />
</div>
<asp:FileUpload ID="FileUpload_diff" onchange="show(this.value)" runat="server" />

</form>
</body>

后台：

protected void Button1_Click(object sender, EventArgs e)
    {
        //获取要上传图片的全名
        string file = FileUpload_diff.FileName;
        if (file.Equals(""))
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "", "alert('请先点击浏览选择照片');", true);
        }
        else
        {
            //截取图片后缀
            string type = file.Substring(file.LastIndexOf(".") + 1);
            //设置文件上传的文件夹路径
            string path = Server.MapPath("~/test/upload");
            path += "//" + file;
            //将图片上传到服务器
            FileUpload_diff.PostedFile.SaveAs(path);
            Image1.ImageUrl = "upload/"+file;
        }
    }