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
{
//没有图片的情况处理
}
}

Asp.net实现同页面内多图片自动上传并带预览显示的更多相关文章

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

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理:   FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...

  2. Asp.net中FileUpload控件实现图片上传并带预览显示

    单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理:     采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...

  3. 织梦DEDECMS更换目录后页面内的图片和缩略图无法显示解决方法

    http://www.win8f.com/seoyouhua/6609.html 很多人碰到织梦更换目录后内容图片和缩略图无法显示的问题,在此,慧鸿网络特地搜集整理了一篇关于织梦出现缩略图和内容无法显 ...

  4. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  5. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  6. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  8. DevExpress控件使用系列--ASPxUploadControl(图片上传及预览)

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  9. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

随机推荐

  1. ios ideviceintaller安装

    1.安装brew 打开终端输入: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst ...

  2. javaScript中对象属性的访问

    有两种方式访问对象属性,一个是点操作符(.),一种是中括号操作符([ ]). 当你知道属性的名称时,使用点操作符: var myObj = { prop1: "val1", pro ...

  3. attack source code

    不废话,直接上代码, 先看截图use pictures;

  4. openx ————带整理

    the initialisation file  初始化文件 Security check        安全检查 /work/puti-api-1.0/www/adapi/lib/OA/Admin/ ...

  5. 装机 win7 64 IE11

    英文版win7,更改语言包 英文版 http://windows.microsoft.com/en-us/internet-explorer/download-ie 中文版 http://window ...

  6. Activity服务类-7 RepositoryService服务类

    Activity服务类-1 RepositoryService服务类一共47个接口1.创建部署//开始创建一个新的部署.DeploymentBuilder createDeployment(); 2. ...

  7. Putty全屏/退出全屏快捷键

  8. ccttp图片处理过程

    1.python输出404的图片 #!/usr/bin/python # coding: utf-8 import psycopg2 import sys from datetime import * ...

  9. ArrayList 原理(2)

    1. 概述 关于Java集合的小抄中是这样描述的: 以数组实现.节约空间,但数组有容量限制.超出限制时会增加50%容量,用System.arraycopy()复制到新的数组,因此最好能给出数组大小的预 ...

  10. 转载 JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...