Форма публикации с полями ввода и несколькими файлами, выбранными с помощью jQuery AJAX в ASP.NET Core

Question

Я пытаюсь вручную отправить форму в ASP.NET Core, используя jQuery AJAX, как только пользователь завершит выбор нескольких файлов. У загрузчика, который я использую, есть событие «selected», где я хотел бы отправить форму на сервер, используя jQueryAJAX.

Эта точно такая же форма отлично отправляется на сервер при добавлении кнопки отправки в форму и нажатии на нее в пользовательском интерфейсе. Файлы связаны, а ProductId связан. Тем не менее, я пытаюсь избежать мерцания страницы. В качестве альтернативного решения я отправляю форму по телефону: $ ("# form"). Submit (); в функции onSelect, а не в запросе AJAX.

Модель выглядит следующим образом:

public int ProductId { get; set; }
public IList<IFormFile> Files { get; set; }

Форма выглядит следующим образом:

<form method="post" enctype="multipart/form-data">
     <ejs-uploader id="Files" showFileList="false" autoUpload="false" multiple="true" selected="onSelected" success="onSuccess" allowedExtensions=".doc, .docx, .pdf, .jpg, .jpeg, .png"></ejs-uploader>
     <input asp-for="ProductId" type="hidden" />
</form>

Вот JavaScript, который я пробовал, который не работает:

    function onSelected(args) {
        var files = args.filesData;
        var formData = new FormData();

        for (var i = 0; i != files.length; i++) {
            formData.append("files[]", files[i]);
        }

        $.ajax({
            type: "POST",
            contentType: false,
            url: '?handler=FileUpload',
            data: formData,
            processData: false,
            headers: {
                RequestVerificationToken:
                    $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            success: function (data) {

            },
        });

        //$("#form").submit();
    }

Я использую razer-страницы, поэтому метод действия:

[BindProperty]
public int MessageId { get; set; }

[BindProperty]
public IList<IFormFile> Files { get; set; }

public async Task<ActionResult> OnPostAsync()
{
}

Я также пытался создать модель представления: FileUploadViewModel с теми же двумя свойствами в нем.

public async Task<ActionResult> OnPostAsync(FileUploadViewModel vm)
{
}

Answer 1

вы можете получить прикрепленный файл в качестве отдельного параметра контроллера типа IEnumerable`. Обратите внимание, что для правильного выполнения сопоставления необходимо выбрать правильное именование для элементов управления входным файлом html, например, если ваш контроллер будет иметьследующая подпись

public ActionResult SaveProduct(Product newproduct , IEnumerable<HttpPostedFileBase> files) 

тогда элементы управления вводом html должны быть названы:

<input type='file' name='files[0]'/>
<input type='file' name='files[1]'/>
<input type='file' name='files[2]'/>

и т. д.

не знаю, есть ли возможность связатьконтролирует непосредственно модель, не создавая связыватель пользовательской модели, но я всегда использовал эту опцию, довольно просто и легко

Answer 2

Согласно FormData.append () , я думаю, вы должны использовать

formData.append("files[]", files[i]);

Вместо

formData.append("files", files[i]);

Чтобы добавить несколько файлов ...