C#.netmvc单文件上传 ajax上传文件

写到到数据库的模型

using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.Linq;using System.Web;namespace WebApplication1.Models{ public class UserInfo { public string Id { get; set; } public string UserName { get; set; } public string 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{ public class HomeController : Controller { [HttpGet] public ActionResult Index() { return View(); } [HttpPost] public string 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>

 

相关文章