Question

我正在尝试使用Krajee的Bootstrap Fileinput（http://plugins.krajee.com/file-input）并在使用.Net MVC时遇到一些问题。

我正在进行正常的表单提交（我需要这样做，因为客户端有很多处理）

这是代码的缩减版本：

我的模特是：

public class AddFormModel
{
    public string txtName { get; set; }
    public HttpPostedFileBase[] fileUpload { get; set; }
}

的index.html：

@model TestSystem.Models.AddFormModel
@{
     Layout = null;
}
<!DOCTYPE html>
<html lang="">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/piexif.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/themes/fa/theme.min.js"></script>
</head>
<body>
<form id="frmMain" action="@Url.Action("AddObject", "Home")" method="post" enctype="multipart/form-data">
        @Html.AntiForgeryToken()
    <div class="container">
        <div class="row">
            <div class="form-group">
              @Html.TextBoxFor(m => m.txtName, null, new { @required = "", @class = "form-control", data_val = "false" })
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="file-loading">
                    <input id="fileUpload" name="fileUpload" class="file" type="file" multiple data-min-file-count="1" data-upload-url="#">
                </div>
            </div>
        </div>
</form>

<script>
$("#fileUpload").fileinput({
    theme: 'fa',
    showUpload: false,
    showClose: false,
    showRemove: false,
    allowedFileExtensions: ['jpg', 'png', 'gif', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'],
    overwriteInitial: false,
    minFileCount: 0,
    maxFileCount: 5,
    maxFileSize: 4000,
    validateInitialCount: true,
    slugCallback: function (filename) {
        return filename.replace('(', '_').replace(']', '_');
    },
    enctype: 'multipart/form-data',
    fileActionSettings: {
        showRemove: true,
        showUpload: false,
        showZoom: false,
        showDrag: false,
    }
});
</script>
</body>
</html>

我的控制器：

public class HomeController : Controller
{
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult AddObject(AddFormModel model)
    {
         // ****When I look at the model here I only see 1 file ****
         //     model.txtName <- this is ok
         //     model.fileUpload <- If I just put one file in the upload
         //                         I can see it
         //     model.fileUpload <- If I put more than one file in the upload
         //                         I can only see the last one
    }
}

更新我打算把： [HttpPost] [ValidateAntiForgeryToken] 围绕Controller方法 - 发布时的错误

Answer 1

如果您要上传多个文件，则需要使用表单标记中已有的enctype="multipart/form-data"。

和HttpPostedFileBase的模型列表，用于捕获您发送的多个文件

public class AddFormModel
{
    public string txtName { get; set; }
    public IEnumerable<HttpPostedFileBase> fileUpload { get; set; }
}

所有其他部分对我来说似乎都很好。

<强>更新

我已经尝试过你的代码，当我发布包含多个文件的表单时，它在我身边工作得很好所有文件都已在控制器的方法中检索model.fileUpload.Count();

需要注意的另一件事[HttpPost]是错误的地方，而不是控制器类

Bootstrap fileinput

1 个答案: