一般处理程序上传图片
(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; } } } }
转自:https://blog.csdn.net/asd358924810/article/details/78243446