Блог

У меня проблема, из-за которой, по-видимому, независимо от того, что я делаю, независимо от количества файлов, независимо от того, удаляю ли я параметр ExtraData и независимо от того, использую ли я параметры в действии контроллера, действие никогда не достигается (моя точка останова никогда не срабатывает).

HTML-код:

 <div id="logoDiv">
     <input id="fileInput" name="files" type="file" 
      data-allowed-file-extensions='["png", "jpg", "jpeg", "tiff"]' multiple/>
</div>
  

Код Javascript:

 var plugin = $('#fileInput').fileinput({
        showCaption: false,
        showPreview: true,
        dropZoneEnabled: false,
        theme: "fa",
        browseClass: "btn btn-ey-upload btn-ey-utility",
        removeClass: "btn btn-ey-upload btn-ey-utility",
        uploadClass: "btn btn-ey-upload btn-ey-utility",
        showClose: false,
        uploadAsync: false,
        uploadUrl: "/GeneralInterview/UploadLogo",
        //uploadExtraData: { id: 1 }
    });
  

Код контроллера:

 [HttpPost]
public JsonResult UploadFile(List<IFormFile> files)
{
     List<string> fileNames = new List<string>();

     return Json(fileNames)
}
  

Я также пробовал как IActionResult, так и JsonResult.

Я действительно не понимаю, что происходит не так, любые другие ресурсы, похоже, делают именно то, что я делаю, но это просто не работает.

РЕДАКТИРОВАТЬ: заголовки ответа и запроса

 content-length: 0
content-security-policy: default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com; script-src 'self' https://ajax.aspnetcdn.com 'nonces-SNIP'; img-src 'self' data:;
date: Fri, 04 Sep 2020 07:26:48 GMT
status: 400
x-content-type-options: nosniff
x-frame-options: DENY
x-powered-by: ASP.NET
x-rate-limit-limit: 7d
x-rate-limit-remaining: 999965
x-rate-limit-reset: 2020-09-11T07:24:01.3268956Z
x-sourcefiles: =?UTF-8?B?QzpcVXNlcnNcR1gyNjRMSFxTb3VyY2VcUmVwb3NcRU9ZLUVZXEVPWVdlYlxHZW5lcmFsSW50ZXJ2aWV3XFVwbG9hZExvZ28=?=
x-xss-protection: 1;mode=block


Request URL: https://localhost:44357/GeneralInterview/UploadLogo
Request Method: POST
Status Code: 400 
Remote Address: [::1]:44357
Referrer Policy: no-referrer-when-downgrade
content-length: 0
content-security-policy: default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com; script-src 'self' https://ajax.aspnetcdn.com 'nonces-SNIP'; img-src 'self' data:;
date: Fri, 04 Sep 2020 07:26:48 GMT
status: 400
x-content-type-options: nosniff
x-frame-options: DENY
x-powered-by: ASP.NET
x-rate-limit-limit: 7d
x-rate-limit-remaining: 999965
x-rate-limit-reset: 2020-09-11T07:24:01.3268956Z
x-sourcefiles: =?UTF-8?B?QzpcVXNlcnNcR1gyNjRMSFxTb3VyY2VcUmVwb3NcRU9ZLUVZXEVPWVdlYlxHZW5lcmFsSW50ZXJ2aWV3XFVwbG9hZExvZ28=?=
x-xss-protection: 1;mode=block
:authority: localhost:44357
:method: POST
:path: /GeneralInterview/UploadLogo
:scheme: https
accept: application/json, text/javascript, */*; q=0.01
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
content-length: 58916
content-type: multipart/form-data; boundary=----WebKitFormBoundaryDm8BfGYWiNAUmPUI
cookie: .AspNetCore.Antiforgery.cookiedata; .AspNetCore.Antiforgery.cookiedata
origin: https://localhost:44357
referer: https://localhost:44357/GeneralInterview/Index/16014
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
x-requested-with: XMLHttpRequest
logoFiles: (binary)
logoFiles: (binary)
initialPreview: []
initialPreviewConfig: []
initialPreviewThumbTags: []
  

Данные формы
files = logoFiles, с тех пор я только что изменил название.

Заранее спасибо.

Тест использования плагина bootstrap-fileinput в ASP.NET Ядро 3.1

Вид

name="files" должно совпадать с именем параметра контроллера List<IFormFile> files .

 @{
    Layout = null;
}


<div id="logoDiv">
    <input id="fileInput" name="files" type="file" class="file" data-allowed-file-extensions='["png", "jpg", "jpeg", "tiff"]' multiple data-theme="fas">

</div>


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/themes/fa/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/locales/(lang).js"></script>

<script>

    $("#fileInput").fileinput({
        showCaption: false,
        showPreview: true,
        dropZoneEnabled: false,
        theme: "fa",
        browseClass: "btn btn-ey-upload btn-ey-utility",
        removeClass: "btn btn-ey-upload btn-ey-utility",
        uploadClass: "btn btn-ey-upload btn-ey-utility",
        showClose: false,
        uploadAsync: false,
        uploadUrl: "/GeneralInterview/UploadLogo",
        //uploadExtraData: { id: 1 }
    });

    // CATCH RESPONSE
    $('#fileInput').on('filebatchuploaderror', function (event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
    });

    $('#fileInput').on('filebatchuploadsuccess', function (event, data, previewId, index) {
        var response = data.response;
        alert(response);
    });

</script>
  

Контроллер

Здесь я использую атрибут маршрута для сопоставления URL запроса /GeneralInterview/UploadLogo

     [Route("/GeneralInterview/UploadLogo")]
    [HttpPost]
    public JsonResult UploadFile(List<IFormFile> files)
    {
        List<string> fileNames = new List<string>();

        foreach(IFormFile file in files)
            fileNames.Add(file.FileName);
        return Json(fileNames);
    }
  

Обновление 04/09/2020

F12 чтобы проверить детали запроса