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

单一图片上传——“选择”+“上传”,.NET默认模式:

1.实现原理:

采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的单击事件中加载已上传图片。

2.关键代码:

    页面代码:

1 <asp:FileUpload ID="FileUpload" runat="server" />
2 <asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上 传" />
3 <asp:Label ID="LabMsg" runat="server"></asp:Label>
4 <img id="img" runat="server" src="" />

    后台代码: 

 1  /// <summary>
 2         /// 上传单一图片——有“选择”+“上传”两个按钮
 3         /// </summary>
 4         /// <param name="sender"></param>
 5         /// <param name="e"></param>
 6         protected void BtnUp_Click(object sender, EventArgs e)
 7         {
 8             if (FileUpload.HasFile)
 9             {
10                 string savePath = Server.MapPath("~/upload/");//指定上传文件在服务器上的保存路径
11                 //检查服务器上是否存在这个物理路径,如果不存在则创建
12                 if (!System.IO.Directory.Exists(savePath))
13                 {
14                     System.IO.Directory.CreateDirectory(savePath);
15                 }
16                 savePath = savePath + "\\" + FileUpload.FileName;
17                 FileUpload.SaveAs(savePath);
18                 LabMsg.Text = string.Format("<a href=‘upload/{0}‘>upload/{0}</a>", FileUpload.FileName);
19                 this.img.Src = "upload/" + FileUpload.FileName;
20             }
21             else
22             {
23                 LabMsg.Text = "你还没有选择上传文件!";
24             }
25         }
时间: 2024-10-19 22:26:09

Asp.net中FileUpload控件实现图片上传并带预览显示的相关文章

调用相机,选择图片上传,带预览功能、图片压缩、相机文字设置、

摘要 iOS调用相机,iOS调用相册,保存至应用程序沙盒,高保真压缩图片,并有点击放大预览,再次点击缩回至原大小,带动画效果,附源码下载地址. Xcode版本4.5.1 类库ios6.0 IOS调用相机 图片预览 图片上传 压缩图片 模拟器添加图片 目录[-] 判断是否支持相机,跳转到相机或相册界面 七.保存图片 高保真压缩图片方法 八.实现点击图片预览功能,滑动放大缩小,带动画 ps:模拟器添加图片 源码下载地址: 一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate ? 1

iOS学习:调用相机,选择图片上传,带预览功能

一.新建工程 <ignore_js_op> 二.拖控件,创建映射 <ignore_js_op> 三.在.h中加入delegate @interface ViewController : UIViewController 复制代码 四.实现按钮事件 -(IBAction)chooseImage:(id)sender { UIActionSheet *sheet; // 判断是否支持相机 if([UIImagePickerController isSourceTypeAvailable

iOS UIPickerController 调用相机,选择图片上传,带预览功能

在.h中加入delegate @interface ViewController : UIViewController<UIActionSheetDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate> //实现按钮事件 -(IBAction)chooseImage:(id)sender { UIActionSheet *sheet; <p> // 判断是否支持相机 </p> if(

WebForm之FileUpload控件(文件上传)

FileUpload控件要与Button.LinkButton.ImageButton配合使用 FileUpload控件的方法及属性: 1.SaveAs("要上传到服务器的绝对路径")方法:用来上传文件 注:一般使用Server.MapPath()方法进行相对路径与绝对路径之间的转换. 2.FileName属性:要上传文件的文件名,不带路径 3.PostedFile.ContentLength属性:获得上传文件的字节长度,除以1024,得到KB <一>最简单的上传 //点击

jquery实现图片上传前本地预览

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery1.8.3-min.js"></script></head><body><div style="width:500p

图片上传前的预览(PHP)

1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post" action="upload.php"><input type="file" name="file1" id="file1" /></form>2.试下效果: 判断文件类型:当用户选择了一

web 图片上传实现本地预览

前言: 刚成为码农不久,第一次工作中接触图片上传功能,说到图片上传,大多数程序员可能都是先上传服务器,再获取路径.如果用户多长更改图片,服务器会产生许多垃圾文件.怎样用js实现本地预览.今天特意抽空百度研究了一下. 在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传按钮添加事件.隐藏真正input框.用事件来触发: function imgBtn(

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览 具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息. 先介绍几个技术点,没接触过的朋友,可以先看看: Promise对象:是异步编程的一种解决方案,里面保存着某个未来才会结束的事件的结果.Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理.技术连接:http://es6.ruany

图片上传后及时预览

<!DOCTYPE html> <html> <head> <meta content="charset=utf-8" /> <!--设置图片上传后预览的div样式--> <style type="text/css"> *{ float:left; margin:0; } body>div{ width:200px; height:225px; text-align:center; } #