FileUpload控件实现单按钮图片自动上传并带预览显示
1.实现原理:
此方法适合针对有后台生成的图片相关内容,例如购物网站商品展示页面中的封面图片,图片的数量由后台访问数据库,并加载到页面。这种情况下,将会有x个FileUpload控件调用__doPostBack方法来用LinkButton的OnClick事件模拟一个事件触发的过程,由于上传控件的数量不固定,不可能使用多个用LinkButton的OnClick事件模拟事件触发的过程。也就是说只能有多个FileUpload控件调用一个LinkButton的OnClick事件模拟事件触发的过程。
多个FileUpload控件调用一个LinkButton的OnClick事件模拟事件触发的过程,由于上传每个图片后都需要显示相应的图片预览,就需要区分出来是每一次都是哪个FileUpload控件进行的上传操作,要加载哪一个图片。 __doPostBack('lbtnUpload1','')后面''的地方可以传递参数,我们可以从此处着手,对每一个图片相关的上传控件,图片预览框进行统一标识。
如何获取参数:
这个两个值在后台可以通过下边方法得到:
Request["__EVENTTARGET"] :获取得到引发页面PostBack的控件ID
Request["__EVENTARGUMENT"]: 获取参数。
2.关键代码:
页面代码:
<asp:FileUpload ID="fuPhoto1" onchange="javascript:__doPostBack('lbUploadPhoto','1')" runat="server" ToolTip="选择图片" ForeColor="White" Width=""/><br />
<img id="img" runat="server" src="" /><br />
<asp:FileUpload ID="fuPhoto2" onchange="javascript:__doPostBack('lbUploadPhoto','2')" runat="server" ToolTip="选择图片" ForeColor="White" Width=""/><br />
<asp:LinkButton ID="lbUploadPhoto" runat="server" OnClick="lbUploadPhoto_Click"></asp:LinkButton>
注意: __doPostBack('lbUploadPhoto','2'),第一个参数为LinkButton的名称,即name值。
后台代码:
/// <param name="e"></param>
protected void lbUploadPhoto_Click(object sender, EventArgs e)
{
fileUpload(Request["__EVENTARGUMENT"]);
}
//从控件上传文件
public void fileUpload(string number)
{
FileUpload fu = FindControl("fuPhoto"+number) as FileUpload;
if (fu.PostedFile != null && fu.PostedFile.ContentLength > )
{
//1. 验证文件格式
string ext = System.IO.Path.GetExtension(fu.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() + ext;
string path = savePath + fileName;
fu.PostedFile.SaveAs(path);
Image img=FindControl("img"+number) as Image;
img.Src = "upload/" + fileName;
}
else
{
//没有图片的情况处理
}
}