Bootstrap文件輸入

我試圖使用Krajee的Bootstrap Fileinput（http://plugins.krajee.com/file-input），並且在使用.Net MVC時遇到了一些問題。Bootstrap文件輸入

我做一個正常的形式提交（我需要這樣做，因爲沒有在客戶端進行大量的處理）

這是代碼的削減版本：

我的模型是：

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 
    } 
}

UPDATE 我的意思是把： [HttpPost] [ValidateAntiForgeryToken] 周圍的控制器方法 - 我的錯誤發佈

來源

2017-10-05 Wattcey

時，如果要上傳多個文件，你需要使用您已經在窗體標籤中使用的enctype="multipart/form-data"。

和HttpPostedFileBase型號列表趕上多個文件已發送

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

所有其他部分似乎沒什麼問題。

UPDATE

我曾嘗試你的代碼它的正常工作在我身邊時，我貼有一個以上的文件形式的所有文件已經在控制器的方法被檢索model.fileUpload.Count();

還有一點要注意[HttpPost]是錯誤的地方它應該在方法而不是在控制器類

來源

2017-10-05 08:48:40 Curiousdev

'HttpPostedFileBase []'是'IEnumerable ' –

哦對不起我錯過了[]':( – Curiousdev

嗨，我試着加入： public IEnumerable fileUpload {get;組; } 仍然只是在model.fileUpload和model.fileUpload.Count（）的最後一個文件仍然是1 – Wattcey

Bootstrap文件輸入

回答

相關問題