前言
最近需要做文件上传的相关模块，考虑了很久，最后决定使用bootstrap-fileinput插件实现。下面就跟大家分享一下如何利用ASP.NET WebAPI + bootstrap-fileinput实现多文件的上传。
前端代码
因为现在提倡前后端分离，所以在我的demo中前端代码就在Visual Studio Code中进行编写，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<!-- bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="bootstrap/js/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- bootstrap-fileinput -->
<link href="bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
<script src="bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="bootstrap-fileinput/js/locales/zh.js"></script>
</head>
<body>
<div class="upload-wrap">
<input id="upload" type="file" multiple="multiple" name="test" />
</div>
<script>
$("#upload").fileinput({
language: 'zh', // 设置语言
uploadUrl: "https://localhost:44306/api/Upload/Upload", // 上传地址
allowedFileExtensions: ['jpg', 'bmp', 'png'], // 接收的文件后缀
uploadAsync: true, // 默认异步上传
showUpload: true, // 显示上传按钮
showRemove: true, // 显示移除按钮
showPreview: true, // 显示预览
showCaption: false, // 显示标题
browseClass: "btn btn-primary", // 按钮样式
dropZoneEnabled: true, // 显示拖拽区域
maxFileCount: 5, // 允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
}).on("fileuploaded", function (event, data, previewId, index) {
window.alert('文件上传成功');
});
</script>
</body>
</html>到此，我们的上传界面前端部分就完成了，如下图所示：
后台代码
接下来只需要实现后台接收文件的代码就可以了。既然前后端分离，那么文件上传也就面临着跨域的问题。关于如何在ASP.NET WebAPI中进行相关的跨域设置，我在之前的博客中就提到过，因此就不再赘述。下图中的Upload文件夹用于存放上传的文件。
代码如下：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
namespace WebApi.Controllers
{
public class UploadController : ApiController
{
[HttpPost]
public void Upload()
{
string uploadPath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "Upload/";
HttpRequest request = HttpContext.Current.Request;
HttpFileCollection files = request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
string fileExtension = Path.GetExtension(file.FileName);
string fileName = Guid.NewGuid().ToString() + fileExtension;
string filePath = uploadPath + fileName;
while (File.Exists(filePath))
{
fileName = Guid.NewGuid().ToString() + fileExtension;
filePath = uploadPath + fileName;
}
file.SaveAs(filePath);
}
}
}
}结果如下图所示：
我们打开Upload文件夹，发现这三张图片都已经上传成功了，如下图所示：
