ASP.NET学习笔记（二）——一般处理程序之图片上传

简单图片上传功能

目标：实现从本地磁盘读取图片文件，展示到浏览器页面。
步骤：

(1). 首先创建一个用于上传图片的HTML模板，命名为ImageUpload.html：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><meta charset="utf-8" />
</head>
<body><!--文件上传必须设置enctype="multipart/form-data"--><form method="post" enctype="multipart/form-data" action="ImageUpload.ashx"><input type="file" name="imgFile" /><input type="submit" value="上传"/></form>
</body>
</html>

模板中包含两个input标签，类型分别为“file”和“submit”，其中，form表单的method属性必须为“post”,enctype为“multipart/form-data”。

(2). 在ImageUpload.html模板中判断一下所上传的文件是否为图片：

<script src="../scripts/jquery-1.12.4.min.js"></script><!--如果监听到上传的文件的后缀不是图片，那就将file得到的内容设为空--><script type="text/javascript">$(function () {$(":file").change(function () {var fileName = $(this).val();var ext = fileName.substr(fileName.lastIndexOf('.'));if (ext == ".jpeg" || ext == ".jpg" || ext == ".png" || ext == ".gif") {return true;} else {$(this).val("");}});});</script>

(3). 新建一个名为ImageUpload.ashx的一般处理程序，为保证上传的文件是图片，需要在后台再次判断一下所传文件的格式（因为浏览器中可以改前台代码）：

using System;
using System.IO;
using System.Web;namespace ThreeLayerWebDemo.FileUpload
{/// <summary>/// ImageUpload 的摘要说明/// </summary>public class ImageUpload : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/html";//context.Response.Write("Hello World");//后台拿到上传来的图片（拿到名为imgFile的input标签的文件）var file =context.Request.Files["imgFile"];//后台也要对拿到的数据是否为图片进行校验（因为前台可以通过浏览器改代码，前台校验完了需要后台再拦截一下）var ext=  Path.GetExtension(file.FileName);if (!(ext==".jpeg"||ext==".jpg"||ext==".png"||ext==".gif")){context.Response.Write("shit,你传的不是图片");context.Response.End();}else{//上传的文件保存到目录(为了保证文件名不重复，加个Guid)string path = "/Upload/" + Guid.NewGuid().ToString() + file.FileName;file.SaveAs(context.Request.MapPath(path));//必须得是相对路径//把图片显示到前端让用户看得到string str = string.Format("<html><head></head><body><img src='{0}'/></body></html>",path);//必须得是绝对路径！！！！context.Response.Write(str);}}public bool IsReusable{get{return false;}}}
}

ASP.NET学习笔记（二）——一般处理程序之图片上传相关推荐

iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
ASP.NET学习笔记 —— 一般处理程序之图片上传
简单图片上传功能目标:实现从本地磁盘读取图片文件,展示到浏览器页面. 步骤: (1). 首先创建一个用于上传图片的HTML模板,命名为ImageUpload.html: <!DOCTYPE h ...
Struts2学习笔记（十六）文件上传（File Upload）
使用jsp/Servlet实现文件上传在我们的web应用中,文件上传是一项非常常见的功能.以前我学习php的时候也用php写过文件上传,不过php中实现起来比较方便,只需要从全局变量$_FILES中 ...
在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
二十七、单张图片上传预览
html部分 <div class="new-store-phone"> <span class="phone-title">营 ...
对element-upload二次封装文件图片上传
这个数字---- 起因: 由于最近做的是CMS系统,上传文件,图片功能太多,使用element的文件上传组件,但是每次都需要写,感觉太繁琐,于是有了男人的想法---对 element 的文件上传组件进 ...
Mr.J-- jQuery学习笔记(二十七)--DOM操作方法(删除获取文本)
清除 <body> <button>调用remove</button> <div>我是div<p>我是段落</p> </d ...
微搭低代码实现二维码显示及上传功能
产品历经多次迭代,一直没有提供二维码组件.在日常小程序中,二维码出示还是一个很常用的功能.官方不提供,我们也只能曲线实现了. 寻找一个开源的在线二维码网站将生成的二维码上传到云存储中 1 二维码在线 ...
ASP.NET MVC 2 学习笔记二: 表单的灵活提交
ASP.NET MVC 2 学习笔记二: 表单的灵活提交前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...
ASP.Net学习笔记015--ASP.Net中使用Cookie
ASP.Net学习笔记015--ASP.Net中使用Cookie 表单数据欺骗: 原理跟收到欺骗短信一样,移动信号塔[基站],伪装的移动信号塔会屏蔽移动信号,并且在信号范围内的手机会自动切换为接收伪 ...

ASP.NET学习笔记（二）——一般处理程序之图片上传

简单图片上传功能

ASP.NET学习笔记（二）——一般处理程序之图片上传相关推荐

最新文章

热门文章