zoukankan      html  css  js  c++  java
  • 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;
    }
    }
    }
    }

  • 相关阅读:
    LLVM 3.0 — LinuxTOY
    Fabric Engine 1.0
    tmux:GNU screen 替代品 — LinuxTOY
    LuoYun 开源云计算平台软件 0.2 Beta 版本发布 — LinuxTOY
    迅雷离线下载脚本 — LinuxTOY
    Vim 状态栏是 Powerline 插件。
    LuoYun 云计算平台 0.4 版本 liveCD 发布
    webOS Isis 开源 — LinuxTOY
    Impress.js — LinuxTOY
    从 screen 切换到 tmux — LinuxTOY
  • 原文地址:https://www.cnblogs.com/zoujinhua/p/10714821.html
Copyright © 2011-2022 走看看