C#.netmvc单文件上传ajax上传文件 [操作系统入门]

Z时代
2024-01-10
分类：综合

写到到数据库的模型

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace WebApplication1.Models
{
publicclass UserInfo
    {
publicstring Id { get; set; }
publicstring UserName { get; set; }
publicstring Address { get; set; }
public HttpPostedFileBase ImgUrl { get; set; }
    }
}

控制器写法

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;
using System.IO;
namespace WebApplication1.Controllers
{
publicclass HomeController : Controller
    {
        [HttpGet]
public ActionResult Index()
        {
return View();
        }
        [HttpPost]
publicstring Index(HttpPostedFileBase file)
        {
//判断文件是否存在
if (file != null)
            {
//写一个文件保存的路径
string imgpath = Server.MapPath(@"Img");
//判断路径是否存在,不存在则创建
if (!Directory.Exists(imgpath))
                {
                    Directory.CreateDirectory(imgpath);
                }
//给文件再起个名
string ImgName = DateTime.Now.ToString("yyyyMMddHHmmss")+"_"+file.FileName;
//把文件保存到服务器上
                file.SaveAs(imgpath + ImgName);
//返回文件的位置
return@"Img" + ImgName;
            }
return"null";
        }
    }
}

前台页面写法

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<div class="form-group">
    <label for="crowd_file"class="col-sm-2 control-label">上传文件</label>
    <div class="col-sm-10">
        <input type="file" accept=".jpg" id="crowd_file">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-10">
        <input type="button" value="上传"class="submit" id="crowd_file">
    </div>
</div>
<script>
    $(‘.submit‘).click(function () {
var formData = new FormData();
       formData.append("file", $(‘#crowd_file‘)[0].files[0]);
        $.ajax({
            url: ‘/Home/Index‘,
            dataType: ‘json‘,
            type: ‘POST‘,
async: false,
            data: formData,
            processData: false, // 使数据不做处理
            contentType: false, // 不要设置Content-Type请求头
            success: function (data) {
                console.log(data);
if (data.status == ‘ok‘) {
                    alert(‘上传成功！‘);
                }
            },
            error: function (response) {
                console.log(response);
            }
        });
    })
</script>