kso经验记录 -- ashx+ajax实现图片上传以及实战应用

本文链接：https://blog.youkuaiyun.com/weixin_44320901/article/details/103600775

ajax的图片上传的好处

实现静态无刷新，来进行上传，用户体验度极好
这里用了一个<script src="js/jquery.form.js"></script>一个上传插件，特别好用，而且非常简单。

html代码

<html>
<head runat="server">
    <title>ajax图片上传</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/jquery.form.js"></script>
    <script type="text/javascript">
        function upload() {
            var path = document.getElementById("File1").value;
            if ($.trim(path) == "") {
                alert("请选择要上传的文件");
                return;
            }
            $("#form1").ajaxSubmit({
                url: '/ashx/Upload_Head.ashx',  
                dataType: "text" , 
                type: "post",  
                success: function (str) {
                    if (str != null && str != "undefined") {
                        $("#img1").attr("src",str)//接收ashx传的路径
                    } 
                },
                error: function (error) { alert(error); }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input id="File1" name="File1" type="file" />
        <input id="iptUp" type="button" value="上传Logo" onclick="upload()" />
        <img id="img1" alt="网站Logo" src="images/weblogo.jpg" />
    </form>
</body>
</html>

千万不要忘记引用<script src="js/jquery-3.4.1.js"></script> <script src="js/jquery.form.js"></script>

ashx界面代码

using System;
using System.IO;
using System.Web;

namespace DianShang.ashx
{
    /// <summary>
    /// Upload_Head 的摘要说明
    /// </summary>
    public class Upload_Head : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            HttpPostedFile file = context.Request.Files["File1"];//获取html传来的数据，路径
            if (file == null)//判断是不是为空
            {
            }
            else
            {
                string flename = Path.GetFileName(file.FileName);//获取名字加后缀
                string Extensio = Path.GetExtension(flename);//获取后缀
                if (Extensio == ".jpg")//判断是不是jpg
                {
                    if (file.ContentLength < 1024 * 1024)//大小不超过1m
                    {
                        string path = "/images/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/";//拼写路径
                        if (!Directory.Exists(context.Request.MapPath(path)))//检测并创建文件夹
                        {
                            Directory.CreateDirectory(context.Request.MapPath(path));
                        }
                        string quanpath = path + Guid.NewGuid().ToString() + Extensio;
                        file.SaveAs(context.Request.MapPath(quanpath));//保存
                        context.Response.Write(quanpath);//返回此路径，前端接收并展示
                    }
                }
            }
        }