MVC文件上传01-使用jquery异步上传并客户端验证类型和大小

布满荆棘的人生 2021-10-19 00:44 266阅读 0赞

本篇体验MVC上传文件，从表单上传过渡到jquery异步上传。

MVC最基本的上传文件是通过form表单提交方式

□ 前台视图部分

<% using(Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new {enctype = "multipart/form-data"}) {)%>

<%}%>

□ 控制器部分

[HttpMethod.Post]

public ActionResult FileUpload(HttpPostedFileBase uploadFile)

{

if(uploadFile.ContenctLength > 0)

{

//获得保存路径

string filePath = Path.Combine(HttpContext.Server.MapPath("../Uploads"),

Path.GetFileName(uploadFile.FileName));

uploadFile.SaveAs(filePath);

}

return View();

}

但整个页面会刷新，面对比较单一、简单的需求的时候，有其价值。但在实际项目中，当然是希望通过异步方式来实现。

使用jQuery文件上传插件实现异步上传

□ 思路

1、使用jQuery文件上传插件的fileupload()方法，为type="file"的input设置url,dataType等，并把数据交给一个全局变量var jqXHRData。  
2、点击上传按钮，提交数据 jqXHRData.submit()  
3、控制器方法负责把文件上传到指定文件夹

□ 需要引用的js文件

□ View Model

属性类型为HttpPostedFileBase。

using System.Web;

namespace MvcApplication1.Models

{

public class MyModel

{

public HttpPostedFileBase MyFile { get; set; }

}

□ HomeController

using System.Web.Mvc;

namespace MvcApplication1.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

return View();

}

□ Home/Index.cshtml

@model MvcApplication1.Models.MyModel

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div>

@Html.TextBoxFor(m => m.MyFile, new {id="simple",type="file"} ) <br/>

<a href="#" id="simpleupload">开始简单上传</a>

</div>

<h5>检查文件类型和尺寸</h5>

<div>

<a href="#" id="checkupload">开始检查并上传</a>

</div>

@section scripts

{

var jqXHRData;

$(function() {

initSimpleFileUpload();

initFileUploadWithCheck();

//简单上传

$('#simpleupload').on('click', function() {

if (jqXHRData) {

jqXHRData.submit();

}

return false;

});

//检查图片文件类型和大小

$('#checkupload').on('click', function() {

if (jqXHRData) {

var isStartUpload = true;

var uploadFile = jqXHRData.files[0];

if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {

alert('允许图片格式gif|jpg|jpeg|tiff|png');

isStartUpload = false;

} else if (uploadFile.size > 4000000) { // 4mb

alert('图片尺寸不能大于4 MB');

isStartUpload = false;

}

if (isStartUpload) {

jqXHRData.submit();

}

return false;

});

//简单上传

function initSimpleFileUpload() {

$('#simple').fileupload({

url: '@Url.Action("UploadFile","File")',

dataType: 'json',

add: function(e, data) {

jqXHRData = data;

done: function(event, data) {

if (data.result.isUploaded) {

alert(data.result.message);

} else {

alert(data.result.message);

}

fail: function(event, data) {

if (data.files[0].error) {

alert(data.files[0].error);

}

});

}

//检查图片文件类型和大小

function initFileUploadWithCheck() {

$('#check').fileupload({

url: '@Url.Action("UploadFile","File")',

dataType: 'json',

add: function (e, data) {

jqXHRData = data;

done: function (event, data) {

if (data.result.isUploaded) {

alert(data.result.message);

} else {

alert(data.result.message);

}

fail: function (event, data) {

if (data.files[0].error) {

alert(data.files[0].error);

}

});

}

</script>

}

相应界面：  
[![界面][161445415111043.png]][161445415111043.png 1]

□ FileController

using System.IO;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MvcApplication1.Controllers

{

public class FileController : Controller

{

public ActionResult Index()

{

return View();

}

[HttpPost]

public ActionResult UploadFile()

{

HttpPostedFileBase myFile = Request.Files["MyFile"];

bool isUploaded = false;

string message = "上传失败";

if (myFile != null && myFile.ContentLength != 0)

{

string pathForSaving = Server.MapPath("~/Uploads");

if (this.CreateFolderIfNeeded(pathForSaving))

{

try

{

myFile.SaveAs(Path.Combine(pathForSaving, myFile.FileName));

isUploaded = true;

message = "上传成功";

}

catch (Exception ex)

{

message = string.Format("上传文件失败：{0}", ex.Message);

}

return Json(new { isUploaded = isUploaded, message = message });

}

/// <summary>

/// 检查是否要创建上传文件夹

/// </summary>

/// <param name="path">路径</param>

/// <returns></returns>

private bool CreateFolderIfNeeded(string path)

{

bool result = true;

if (!Directory.Exists(path))

{

try

{

Directory.CreateDirectory(path);

}

catch (Exception)

{

//TODO：处理异常

result = false;

}

return result;

}

□ 另外，配置文件中需要设置允许的最大文件尺寸

<system.web>

...

</system.web>

□ 结果

上传成功后，多了Uploads文件夹：  
[![1][]][1 1]

上传PDF格式，出现报错：  
[![2][]][2 1]

□ 参考资料

※ [ASP.NET MVC: Simple example of ajax file upload][ASP.NET MVC_ Simple example of ajax file upload]

转载于:https://www.cnblogs.com/darrenji/p/3603351.html

[161445415111043.png]: https://images0.cnblogs.com/blog/417212/201403/161445415111043.png
[161445415111043.png 1]: /images/20211018/965cea2a194f4657be8de243d048d207.png
[1]: /images/20211018/c59e1a5d4a624d3ab4977b7bf88381c9.png
[1 1]: https://images0.cnblogs.com/blog/417212/201403/161445417151514.png
[2]: /images/20211018/ae7b82218bea4b309e822529d44c8fb4.png
[2 1]: https://images0.cnblogs.com/blog/417212/201403/161445421365685.png
[ASP.NET MVC_ Simple example of ajax file upload]: http://powerdotnetcore.com/asp-net-mvc/asp-net-mvc-simple-ajax-file-upload-using-jquery