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学习笔记 —— 一般处理程序之图片上传的更多相关文章
- Android学习笔记进阶之在图片上涂鸦(能清屏)
Android学习笔记进阶之在图片上涂鸦(能清屏) 2013-11-19 10:52 117人阅读 评论(0) 收藏 举报 HandWritingActivity.java package xiaos ...
- ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- Asp.net core 学习笔记 ( upload/download files 文件上传与下载 )
更新 : 2018-01-22 之前漏掉了一个 image 优化, 就是 progressive jpg refer : http://techslides.com/demos/progressi ...
- 基于ASP.Net +easyUI框架上传图片,实现图片上传,提交表单
<body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" typ ...
- Dynamic CRM 2013学习笔记(十三)附件上传 / 上传附件
上传附件可能是CRM里比较常用的一个需求了,本文将介绍如何在CRM里实现附件的上传.显示及下载.包括以下几个步骤: 附件上传的web页面 附件显示及下载的附件实体 调用上传web页面的JS文件 实体上 ...
- java web 学习笔记 - jsp用的文件上传组件 SmartUpload
---恢复内容开始--- 1. SmartUpload 此控件在jsp中被广泛的使用,而FileUpload控件主要是用在框架中 2. 如果想要使用,需要在tomcat的lib目录中,将SmartUp ...
- ASP.NET MVC+Easyui 后台管理系统的图片上传
实现图片的上传 easyui代码部分: //添加按钮 var URL; $("#btnCreate").click(function () { $('#UserDialog').d ...
- Beego 学习笔记11:文件的上传下载
文件的上传和下载 1->文件的上传 文件的上传,采用的是uploadify.js这个插件. 本事例实现的是上传图片文件,其他的文件上传也一样. 2->文件的下载 文件的下载有两个实现的方式 ...
随机推荐
- Odoo开源ERP:功能模块操作-销售功能篇
客户基础资料 1. 所有的客户基础资料,智云ERP开账启用时,期初的客户数据如果大于200条,可以批量导入: 2. 点“销售/订单/客户”菜单可以查看.编辑修改.搜索所有的客户基础资料: 3. 多层级 ...
- Percona XtraBackup 关于 MySQL备份还原的详细测试
一. Percona XtraBackup 的优点. (1)无需停止数据库进行InnoDB热备: (2)增量备份MySQL: (3)流压缩传输到其它服务器: (4)在线移动表: (5)能够比较容易地创 ...
- WebSocket整合SSM(Spring,Struts2,Maven)
一.WebSocket与HTTP长轮询 WebSocket 属于HTML5 规范的一部分,提供的一种在单个 TCP 连接上进行全双工通讯的协议.允许服务端主动向客户端推送数据.在 WebSocket ...
- 网络协议 15 - P2P 协议:小种子大学问
[前五篇]系列文章传送门: 网络协议 10 - Socket 编程(上):实践是检验真理的唯一标准 网络协议 11 - Socket 编程(下):眼见为实耳听为虚 网络协议 12 - HTTP 协议: ...
- qml demo分析(text-字体展示)
上一篇文章分析了一个小游戏,使用qml编写界面+js进行复杂逻辑控制,算是一个比较完整的qml示例代码了,今天就不那么继续变态啦,来看一个简单的字体示例程序吧,该示例代码比较简单,主要是展示了几个简单 ...
- c# 获取当前时间的微秒
获取毫秒大家都经常用到. 大家应该都知道怎么用. 但是,毫秒下面还有微秒. 其实这个方法也已经在c#中. 只不过很少有人用到,所以查找资料也很少有人说. 下面代码就是获取微秒的方式: DateTime ...
- Angular CLI 安装和使用
1.背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line ...
- Java设计模式系列-工厂方法模式
原创文章,转载请标注出处:<Java设计模式系列-工厂方法模式> 一.概述 工厂,就是生产产品的地方. 在Java设计模式中使用工厂的概念,那就是生成对象的地方了. 本来直接就能创建的对象 ...
- 【春华秋实】.NET Core之只是多看了你一眼
感官初体验 技术学习是一件系统性的事情,如果拒绝学习,那么自己就会落后以至于被替代..NET也是一样,当开源.跨平台成为主流的时候,如果再故步自封,等待.NET的就是死路一条,幸好.NET Core问 ...
- React-代码复用(mixin.hoc.render props)
前言 最近在学习React的封装,虽然日常的开发中也有用到HOC或者Render Props,但从继承到组合,静态构建到动态渲染,都是似懂非懂,索性花时间系统性的整理,如有错误,请轻喷~~ 例子 以下 ...