C# MVC Ajax上传图片及文件前后端分离测试

来自喵星

已于 2022-07-25 10:59:39 修改

阅读量926

点赞数

分类专栏： Javascript Ajax C# 文章标签： html js jquery

于 2020-07-09 14:09:29 首次发布

本文链接：https://blog.csdn.net/qq_27577113/article/details/107227013

版权

Javascript 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

原始表单同步提交文件
通过jQuery使用ajaxSubmit异步提交文件

原始表单同步提交文件

前端代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试文件上传</title>
    <style>
        .b1 {
            border: #00f 1px solid;
            width: 300px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="b1">
        <form action="https://localhost:44350/upload/uploadImage" method="post" enctype="multipart/form-data">
            <input type="file" name="myfile" /><br />
            <input type="submit" value="使用原始表单提交,缺点:不能异步" />
        </form>
    </div>
</html>

后端代码

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;

namespace MVCDeployDemo.Controllers
{
    public class UploadController : Controller
    {
        public JsonResult uploadImage()
        {
            //从请求中获取文件
            HttpPostedFileBase file2 = Request.Files["myfile"];
            if (file2 != null)
            {
                //设置要保存的文件名
                string name = file2.FileName;
                string relativePath = "Content/uploadImg/" + DateTime.Now.Ticks + name.Substring(name.LastIndexOf("."));//相对路径文件夹
                string filepath = Server.MapPath("~") +"/"+ relativePath;//绝对文件路径
                //保存文件                                                                                            
                file2.SaveAs(filepath);
                //返回状态码和图片保存的路径
                var r = new Result() { code = 200, filepath = relativePath };
                return Json(r, JsonRequestBehavior.AllowGet);
            }
            return Json(500, JsonRequestBehavior.AllowGet);
        }
        class Result
        {
            public int code { get; set; }
            public string filepath { get; set; }
        }
    }
}

通过jQuery使用ajaxSubmit提交文件

前端代码，需要引入jquery.js，jquery.form.js

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试文件上传</title>
    <script src="node_modules\jquery\dist\jquery.js" type="text/javascript"></script>
    <script src="http://malsup.github.io/jquery.form.js" type="text/javascript"></script>
    <style>
        .b1 {
            border: #00f 1px solid;
            width: 300px;
            padding: 10px;
        }
    </style>
</head>

<body>
   <div class="b1">
        <form id="mainForm" method="post" enctype="multipart/form-data" class="jsrz_main_information">
            <input type="file" name="myfile">
            <input type="button" id="agreementSub" value="使用ajaxSumbit提交文件">
        </form>
    </div>
    <script>
        window.onload = function () {
            console.log("为upload注册事件");
            $("#agreementSub").on("click", function () {
                $('#mainForm').ajaxSubmit(      //ajax方式提交表单
                    {
                        url: 'https://localhost:44350/upload/uploadImage',
                        type: 'post',
                        beforeSubmit: function () { },
                        success: function (data) {
                            console.log(data);
                        },
                        clearForm: false,//禁止清除表单
                        resetForm: false, //禁止重置表单
                        success: function (data) {
                            if (data.code == 200) {
                                var img = "<img src='https://localhost:44350/" + data.filepath + "'/>";
                                $(".jsrz_main_information").append(img);
                            }
                        }
                    });
            });
        }
    </script>

</html>

后端代码

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;

namespace MVCDeployDemo.Controllers
{
    public class UploadController : Controller
    {
        public JsonResult uploadImage()
        {
            //从请求中获取文件
            HttpPostedFileBase file2 = Request.Files["myfile"];
            if (file2 != null)
            {
                //设置要保存的文件名
                string name = file2.FileName;
                string relativePath = "Content/uploadImg/" + DateTime.Now.Ticks + name.Substring(name.LastIndexOf("."));//相对路径文件夹
                string filepath = Server.MapPath("~") +"/"+ relativePath;//绝对文件路径
                //保存文件                                                                                            
                file2.SaveAs(filepath);
                //返回状态码和图片保存的路径
                var r = new Result() { code = 200, filepath = relativePath };
                return Json(r, JsonRequestBehavior.AllowGet);
            }
            return Json(500, JsonRequestBehavior.AllowGet);
        }
        class Result
        {
            public int code { get; set; }
            public string filepath { get; set; }
        }
    }
}

运行测试，选择一个图片文件，上传成功。