FileUpload控件实现单按钮图片自动上传并带预览显示

FileUpload控件实现单按钮图片自动上传并带预览显示

1.实现原理：

 

FileUpload控件默认不支持服务端的ONCHANGE事件，此时用一种变通的方法借用客户端的onchange事件，调用__doPostBack方法来用LinkButton的OnClick事件模拟一个事件触发的过程，可以在LinkButton的OnClick事件中进行图片的上传，和预览加载。

 

2.关键代码：

 

   页面代码：

<asp:FileUpload ID="fuPhoto" onchange="javascript:__doPostBack('lbtnUpload','')"  runat="server" ToolTip="选择图片" ForeColor="White" Width="68"/>
<asp:LinkButton ID="lbtnUpload" runat="server" OnClick="lbUploadPhoto_Click"></asp:LinkButton>
<img id="img" runat="server" src="" />

   后台代码：

/// <summary>
/// 自动上传事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lbUploadPhoto_Click(object sender, EventArgs e)
{
    fileUpload();
}
//从控件上传文件
public void fileUpload()
{
    if (fuPhoto.PostedFile != null && fuPhoto.PostedFile.ContentLength > 0)
    {
       //1. 验证文件格式
        string ext = System.IO.Path.GetExtension(fuPhoto.PostedFile.FileName).ToLower();
        if (ext != ".jpg" && ext != ".gif"&&ext!=".png")
        {
            Response.Write("文件非法！");
            return;
        }
        string savePath = Server.MapPath("~/upload/");//指定上传文件在服务器上的保存路径
        //2. 检查服务器上是否存在这个物理路径，如果不存在则创建
        if (!System.IO.Directory.Exists(savePath))
        {
            System.IO.Directory.CreateDirectory(savePath);
        }
        Random random = new Random(DateTime.Now.Millisecond);
        string fileName = DateTime.Now.ToString("yyMMddhhmmss") + random.Next(10000)+ext;
        string path = savePath + fileName;
        fuPhoto.PostedFile.SaveAs(path);
        this.img1.Src = "upload/" + fileName;
    }
    else
    {
//do some thing;
    }
}