bootstrap-fileinput插件实现多文件的上传

最新推荐文章于 2024-06-05 16:27:31 发布

HerryDong

最新推荐文章于 2024-06-05 16:27:31 发布

阅读量2.2k

点赞数

分类专栏： ASP.NET 文章标签： bootstrap

本文链接：https://blog.csdn.net/HerryDong/article/details/108000121

版权

ASP.NET 专栏收录该内容

16 篇文章 8 订阅

订阅专栏

前言

最近需要做文件上传的相关模块，考虑了很久，最后决定使用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文件夹，发现这三张图片都已经上传成功了，如下图所示：

HerryDong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-fileinput插件实现多文件的上传

前言最近需要做文件上传的相关模块，考虑了很久，最后决定使用bootstrap-fileinput插件实现。下面就跟大家分享一下如何利用ASP.NET WebAPI + bootstrap-fileinput实现多文件的上传。前端代码因为现在提倡前后端分离，所以在我的demo中前端代码就在Visual Studio Code中进行编写，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫

专栏目录