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

前言

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于使用bootstrap-fileinput插件进行分片上传,你需要确保使用的是5.0版本或更高版本的插件,因为分片上传功能是在5.0版本中新增的。分片上传适用于需要上传文件但又无法放开包大小限制的情况。你可以通过开启分片上传实现这一功能。\[1\] 另外,需要注意的是,虽然bootstrap-fileinput插件可以用于已经上传到服务器端的文件的回显,但并不是对回显操作的最佳解决方案。对于回显操作,最好不要使用bootstrap-fileinput插件。然而,作为bootstrap-fileinput插件的基本功能之一,你可以在示例中通过该插件实现文件的回显,包括图片文件。\[2\] 如果你想使用bootstrap-fileinput插件,你需要在页面中引入相应的脚本文件,例如: <script type="text/javascript" src="~/bootstrap-fileinput/themes/fas/theme.js"></script> 这样可以确保插件的功能正常运行。\[3\] #### 引用[.reference_title] - *1* [bootstrap-fileinput分片上传](https://blog.csdn.net/puss0/article/details/124080911)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [第51章 Bootstrap-Fileinput深入理解](https://blog.csdn.net/zhoujian_911/article/details/125425153)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值