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

1.实现原理:
 
FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调用__doPostBack方法来用LinkButton的OnClick事件模拟一个事件触发的过程,可以在LinkButton的OnClick事件中进行图片的上传,和预览加载。
 
2.关键代码:
 
   页面代码:
  1. <asp:FileUpload ID="fuPhoto" onchange="javascript:__doPostBack('lbtnUpload','')" runat="server" ToolTip="选择图片" ForeColor="White" Width=""/>
  2. <asp:LinkButton ID="lbtnUpload" runat="server" OnClick="lbUploadPhoto_Click"></asp:LinkButton>
  3. <img id="img" runat="server" src="" />

后台代码:

  1. /// <summary>
  2. /// 自动上传事件
  3. /// </summary>
  4. /// <param name="sender"></param>
  5. /// <param name="e"></param>
  6. protected void lbUploadPhoto_Click(object sender, EventArgs e)
  7. {
  8. fileUpload();
  9. }
  10. //从控件上传文件
  11. public void fileUpload()
  12. {
  13. if (fuPhoto.PostedFile != null && fuPhoto.PostedFile.ContentLength > )
  14. {
  15. //1. 验证文件格式
  16. string ext = System.IO.Path.GetExtension(fuPhoto.PostedFile.FileName).ToLower();
  17. if (ext != ".jpg" && ext != ".gif"&&ext!=".png")
  18. {
  19. Response.Write("文件非法!");
  20. return;
  21. }
  22. string savePath = Server.MapPath("~/upload/");//指定上传文件在服务器上的保存路径
  23. //2. 检查服务器上是否存在这个物理路径,如果不存在则创建
  24. if (!System.IO.Directory.Exists(savePath))
  25. {
  26. System.IO.Directory.CreateDirectory(savePath);
  27. }
  28. Random random = new Random(DateTime.Now.Millisecond);
  29. string fileName = DateTime.Now.ToString("yyMMddhhmmss") + random.Next()+ext;
  30. string path = savePath + fileName;
  31. fuPhoto.PostedFile.SaveAs(path);
  32. this.img1.Src = "upload/" + fileName;
  33. }
  34. else
  35. {
  36. //do some thing;
  37. }
  38. }

FileUpload控件实现单按钮图片自动上传并带预览显示的更多相关文章

  1. Asp.net实现同页面内多图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: 此方法适合针对有后台生成的图片相关内容,例如购物网站商品展示页面中的封面图片,图片的数量由后台访问数据库,并加载到页面.这种 ...

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

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

  3. ASP.NET让FileUpload控件支持浏览自动上传功能的解决方法

    ASP.NET的FileUpload控件默认是不支持服务端的onchange事件的,此时可以用一种变通的方法来实现这一功能. 这就需要借用客户端的onchange事件,调用__doPostBack方法 ...

  4. WebForm之FileUpload控件(文件上传)

    FileUpload控件要与Button.LinkButton.ImageButton配合使用 FileUpload控件的方法及属性: 1.SaveAs("要上传到服务器的绝对路径" ...

  5. FileUpload控件「批次上传 / 多档案同时上传」的范例--以「流水号」产生「变量名称」

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/19/multiple_fileupload_asp_net_20130819. ...

  6. C# 自定义FileUpload控件

    摘要:ASP.NET自带的FileUpload控件会随着浏览器的不同,显示的样式也会发生改变,很不美观,为了提高用户体验度,所以我们会去自定义FileUpload控件 实现思路:用两个Button和T ...

  7. FileUpload控件使用初步

    FileUpload控件使用初步   FileUpload控件使用初步: 1.实现文件上传 protected void btnSubmit_click(object sender, EventArg ...

  8. webform FileUpload控件实例应用 上传图片

    首先在根目录下建一个"images"文件: HTML: <form id="form1" runat="server"> < ...

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

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

随机推荐

  1. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

  2. javascript的面向对象思想知识要点

    获取数据类型 typeof undefined:访问某个不存在的或未经赋值的变量时就会得到一个 undefined,用typeof 获取类型,得到的也是undefined;null:它不能通过java ...

  3. 【Codeforces】CF 467 C George and Job(dp)

    题目 传送门:QWQ 分析 dp基础题. $ dp[i][j] $表示前i个数分成j组的最大和. 转移显然. 吐槽:做cf题全靠洛谷翻译苟活. 代码 #include <bits/stdc++. ...

  4. OTL技术应用

    什么是OTL:OTL 是 Oracle, Odbc and DB2-CLI TemplateLibrary 的缩写,是一个操控关系数据库的C++模板库,它目前几乎支持所有的当前各种主流数据库,如下表所 ...

  5. pip安装包(python安装gevent(win))

    下载: https://www.lfd.uci.edu/~gohlke/pythonlibs/#greenlet greenlet greenlet-0.4.14-cp36-cp36m-win_amd ...

  6. python pip使用报错:Fatal error in launcher: Unable to create process using '"'

    在一个系统中共存Python2.python3的时候,pip.pip2.pip3使用的时候会报错: c:\Python35\Scripts>pip3Fatal error in launcher ...

  7. Python——连接操作数据库

    1.安装MySQL驱动程序.下载自动安装包,双击安装即可,非常简单. 2.连接MySQL,下面是Python示例代码. import MySQLdbconn=MySQLdb.connect(host= ...

  8. C常用问题

    linux系统,gcc编译器包含引用的头文件位置

  9. Mybatis 为什么不要用二级缓存

    https://www.cnblogs.com/liouwei4083/p/6025929.html mybatis 二级缓存不推荐使用 一 mybatis的缓存使用. 大体就是首先根据你的sqlid ...

  10. ELK配置过程初次安装使用心得--elasticsearch5.4版--及logstash

    安装所遇到的问题:http://www.bubuko.com/infodetail-1889252.html 一,先创建用户和组groupadd es useradd -g es es passwd  ...