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

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

转载于:https://www.cnblogs.com/xyyt/p/3978562.html

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

  1. FlexPaper控件实现文档的上传和预览

    引言 之前在一个项目中初识了这个控件,当时自己对这个东西非常高的好奇就尝试着做了一个Demo,最近在项目中 遇到了这个需求,所以我向组长推荐了我的这中做法,在之前的系统中是将文档转换成html然后在前 ...

  2. jquery.fileupload.js插件使用--单视频或音频上传预览

    一.前台代码: <!DOCTYPE html> <html> <head><title>jquery.fileupload.js使用测试</tit ...

  3. C#控件之OpenFileDialog选择图片文件并在picturebox里面显示

    1.拖一个button一个textbox一个picturebox到面板,还有OpenFileDialog也要拖进去 2.相关代码 using System; using System.Collecti ...

  4. Android 九宫格布局(图片上传、预览)

    前言: 利用RecyclerView展示朋友圈UI布局,包含展示.预览.删除等功能 效果图 1.在项目app\build.gradle添加依赖 //图片加载implementation 'com.gi ...

  5. 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图

    本文借助vs2005中自带的FileUpload控件实现图片文件的上传并生成缩略图. 实现过程:选择图片上传成功后,取得已经存在服务器的文件生成缩略图,并且判断是否是图片类型的文件,这个的判断可以在程 ...

  6. asp.net html控件上传图片,asp.net fileupload控件上传图片并预览图片

    本文为大家分享了fileupload控件实现上传图片后并进行预览图片的功能,并对web.config进行了配置,先看一下最终效果: 页面代码: 后台代码: using System; using Sy ...

  7. FileUpload控件

    FileUpload这个控件我在随笔: <在数据库中 存储图片 以及 在界面中显示图片(存储图片路径)- 这种方法相对与存储二进制文件好>之中,已经做了介绍,那篇随笔只是介绍上传图片,FI ...

  8. FileUpload控件学习

    FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径来指定要上载的文件:也可以通 ...

  9. fileupload控件的属性_ASP:FileUpload控件(文件上传控件)

    FileUpload控件的主要功能是向指定目录上传文件,该控件包括一个文本框和一个浏览按钮.用户可以在文本框中输入完整的文件路径,或者单击浏览按钮选择需要上传的文件.FileUpload控件不会自动上 ...

最新文章

  1. leetcode-24 两两交换链表中的节点
  2. 【Java 并发编程】线程池机制 ( ThreadPoolExecutor 线程池构造参数分析 | 核心线程数 | 最大线程数 | 非核心线程存活时间 | 任务阻塞队列 )
  3. 如何实现一个分布式 RPC 框架
  4. java apk安装路径_android apk安装过程源码解析
  5. c# MEF框架(四 MEF高级进阶)
  6. 满足条件的数累加(信息学奥赛一本通-T1066)
  7. IBM Storwize V7000详解:IIS西安大会现场观察
  8. 实战课堂:一则CPU 100%的故障分析处理知识和警示
  9. php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
  10. 泛微云桥e-Bridge任意文件读取
  11. HTB靶机:RainyDay
  12. Android安全[app风险]
  13. Referring Image Segmentation 综述
  14. What is event bubbling and capturing?
  15. 使用OneDNS完美解决办公网络优化问题
  16. 哈工大2022计算机系统大作业---程序人生
  17. 如何同时给多个视频加水印?
  18. java开发速成班培训课程(1)
  19. 第十二届蓝桥杯 Java 省赛 B 组部分真题解析
  20. VR全景乡村,VR全景,身临其境,感受自然

热门文章

  1. [YTU]_2907(类重载实现矩阵加法)
  2. Python中read()、readline()和readlines()三者间的区别和用法
  3. table1函数----一维查表
  4. rot90--矩阵旋转
  5. C++(Goto使用实例)
  6. Anacanda的安装
  7. 科大讯飞语音合成api
  8. 网站请求过程中的代号及意义
  9. RT-Thread的位图调度算法分析(最新版)
  10. asm.js的陷阱1