отправить файл и текстовые параметры, используя ajax на mvc

Question

Проверьте код JQuery ниже.Здесь я извлекаю файл из html, а затем публикую его с помощью вызова ajax моего метода Controller Post.И из метода пост контроллера, я успешно получаю этот файл в переменной с именем files, как вы можете видеть.Но мой вопрос заключается в том, как я могу отправить еще два текстовых параметра - type и id из этого вызова ajax, а также как я могу получить это значение из контроллера с этим файлом?В основном я должен захватить этот файл с этим текстовым значением также.Как это возможно?Какие изменения нужны в ajax и контроллере?

Html:

<div class="col-sm-3" style="float:left;">
                        <label class="btn btn-outline-dark btn-block">
                            Browse...
                            <span id="uploaded-file-name" style="font-style: italic"></span>
                            <input id="file-upload" type="file" name="file"
                                   onchange="$('#uploaded-file-name').text($('#file-upload')[0].value);" hidden>
                        </label>
                    </div>
                    <div class="col-sm-2" style="float:left;">
                        <button class="btn btn-dark" id="start_upload">Start Upload</button>
                    </div>

Jquery ajax:

//file upload
        $("#start_upload").click(function (evt) {
            var fileUpload = $("#file-upload").get(0);
            var files = fileUpload.files;
            var data = new FormData();
            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }
            $.ajax({
                type: "POST",
                url: "/Products/UploadFiles",
                contentType: false,
                processData: false,
                data: data,
                success: function (message) {
                    alert(message);
                },
                error: function () {
                    alert("There was error uploading files!");
                }
            });
        });

Основной контроллер MVC .net:

[HttpPost]
public IActionResult UploadFiles()
{
    //file upload process
    var files = Request.Form.Files;

    string type = "";
    int id = ;


}

Answer 1

То, что я делаю здесь, это просто вставьте ключ со значениями в FormData() obj из jquery, и вы сможете получить его с вашего контроллера.Если вы хотите узнать больше о FormData(), тогда читайте здесь

Измените свой jquery на этот -

//file upload
        $("#start_upload").click(function (evt) {
            var fileUpload = $("#file-upload").get(0);
            var files = fileUpload.files;
            var data = new FormData();
            data.append('type', 'your_type');
            data.append('id', '1');

            for (var i = 0; i < files.length; i++) {
                data.append(files[i].name, files[i]);
            }
            $.ajax({
                type: "POST",
                url: "/Products/UploadFiles",
                contentType: false,
                processData: false,
                data: data,
                success: function (message) {
                    alert(message);
                },
                error: function () {
                    alert("There was error uploading files!");
                }
            });
        });

Затем получите это значение по его ключу из контроллера:

[HttpPost]
public IActionResult UploadFiles()
{
    //file upload process
    var files = Request.Form.Files;
    string type = Request.Form.Where(x => x.Key == "type").FirstOrDefault().Value;
    string id = Request.Form.Where(x => x.Key == "id").FirstOrDefault().Value;

}

Answer 2

Вы можете добавить другие значения поля ввода в объект FormData.

Я бы начал с создания модели представления для приема полезной нагрузки ajax

public class UploadVm
{
    public string Type { set; get; }
    public string Id { set; get; }
    public HttpPostedFileBase File { set; get; }
}

Теперь, по вашему мнению, добавьте 2дополнительные элементы ввода для чтения этого значения от пользователя

<input id="id"   type="text" />
<input id="type" type="text" />

Теперь в свой код вызова ajax добавьте еще 2 элемента к объекту FormData.

$("#start_upload").click(function (evt) {

    var fileUpload = $("#file-upload").get(0);
    var files = fileUpload.files;
    var data = new FormData();

    for (var i = 0; i < files.length; i++) {
        data.append("File", files[i]);
    }

    //Add the input element values
    data.append("Type", $("#type").val());
    data.append("Id", $("#id").val());

    $.ajax({
        type: "POST",
        url: "/Products/UploadFiles",
        contentType: false,
        processData: false,
        data: data,
        success: function (message) {
            console.log(message);
        },
        error: function () {
            alert("There was error uploading files!");
        }
    });

});

Теперь на стороне вашего сервераВы можете использовать нашу новую модель представления в качестве параметра для метода действия.Когда будет выполнен вызов ajax, связыватель модели сможет отобразить полученные данные из запроса и сопоставить их со свойствами нашего UploadVm объекта модели представления.

[HttpPost]
public ActionResult UploadFiles(UploadVm model)
{
    // to do : read values of model and use it
    // to do : return something
}