简单图片上传功能
目标：实现从本地磁盘读取图片文件，展示到浏览器页面。
步骤：
(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学习笔记 —— 一般处理程序之图片上传的更多相关文章

  1. Android学习笔记进阶之在图片上涂鸦(能清屏)

    Android学习笔记进阶之在图片上涂鸦(能清屏) 2013-11-19 10:52 117人阅读 评论(0) 收藏 举报 HandWritingActivity.java package xiaos ...

  2. ASP.NET Core 简单实现七牛图片上传（FormData 和 Base64）

    ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...

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

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

  4. Asp.net core 学习笔记 ( upload/download files 文件上传与下载 )

    更新 :  2018-01-22  之前漏掉了一个 image 优化, 就是 progressive jpg refer : http://techslides.com/demos/progressi ...

  5. 基于ASP.Net +easyUI框架上传图片，实现图片上传，提交表单

    <body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" typ ...

  6. Dynamic CRM 2013学习笔记（十三）附件上传 / 上传附件

    上传附件可能是CRM里比较常用的一个需求了,本文将介绍如何在CRM里实现附件的上传.显示及下载.包括以下几个步骤: 附件上传的web页面 附件显示及下载的附件实体 调用上传web页面的JS文件 实体上 ...

  7. java web 学习笔记 - jsp用的文件上传组件 SmartUpload

    ---恢复内容开始--- 1. SmartUpload 此控件在jsp中被广泛的使用,而FileUpload控件主要是用在框架中 2. 如果想要使用,需要在tomcat的lib目录中,将SmartUp ...

  8. ASP.NET MVC+Easyui 后台管理系统的图片上传

    实现图片的上传 easyui代码部分: //添加按钮 var URL; $("#btnCreate").click(function () { $('#UserDialog').d ...

  9. Beego 学习笔记11：文件的上传下载

    文件的上传和下载 1->文件的上传 文件的上传,采用的是uploadify.js这个插件. 本事例实现的是上传图片文件,其他的文件上传也一样. 2->文件的下载 文件的下载有两个实现的方式 ...

随机推荐

  1. Android新手引导库推荐

    本文同步至http://javaexception.com/archives/31 介绍一波新手引导层的库.都是star数挺高的一些库. 1.NewbieGuide(国内开发者开发) Android ...

  2. postgresql 使用pg_restore时显示role "root" does not exist的解决办法

    在docker里恢复bakcup格式的数据库,结果提示role "root" does not exist 解决方法: 切换用户: su - postgres 然后再次运行命令: ...

  3. SqlServer中用SQL语句附加数据库及修改数据库逻辑文件名

    --查询数据库逻辑文件名 USE 数据库名 SELECT FILE_NAME(1) --查询数据库逻辑文件名(日志) USE 数据库名 SELECT FILE_NAME(2) --附加数据库 sp_a ...

  4. Storm入门（十三）Storm Trident 教程

    转自:http://blog.csdn.net/derekjiang/article/details/9126185 英文原址:https://github.com/nathanmarz/storm/ ...

  5. PyQt5 api 帮助文档

    学习PyQt5的帮助文档是通过,使用help(PyQt5 class)的方式在console端输出帮助内容,常用的方法和属性查找起来不是很方便,现在放在网上以方便大家使用. QWidget Qt QM ...

  6. 小白学习Python之路---开发环境的搭建

    本节内容 1.Python的介绍 2.发展史 3.安装Python 4.搭建开发环境 5.Hello World程序 一.Python的介绍 Python的创始人为荷兰人吉多·范罗苏姆(Guido v ...

  7. javascript放大镜效果

    JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...

  8. Vuex，状态管理模式

    对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导 ...

  9. 记录DEV gridview获取行列数据方法

    DataRow dr = this.gridView1.GetDataRow(this.gridView1.FocusedRowHandle);//获取选中行 string str = gridVie ...

  10. DotNetCore跨平台~认识环境和环境变量

    回到目录 环境 环境,对于开发来说就是部署的一种场景,你可以是调试场景,测试场景,生产场景,当然还可以有很多其它的场景,只要你的项目需要就可以自定义,微软帮我们定义了三种标准的环境变量,下面来说一下． ...