时间戳

首页 > 解决方案 > 使用ajax将照片和多个数据发送到控制器

javascript - 使用ajax将照片和多个数据发送到控制器

问题描述

我正在使用 ajax 和 javascript 将选定的照片发送到我在 asp.net 核心中的控制器。感谢下面的代码：

<form id="form" name="form" style="display:none;" method="post" enctype="multipart/form-data">
    <div class="row">
        <div class="col-md-12">
            <input  onchange="uploadFiles('files');" class="form-control" type="file" id="files">
        </div>
    </div>
</form>

我的 javascript 和 ajax 代码：

var sliderFotografEkle = "@Url.Action("sliderFotoKayit", "slider")";

function uploadFiles(inputId) {
    var input = document.getElementById(inputId);
    var files = input.files;
    var formData = new FormData();

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


    $.ajax(
        {
            url: sliderFotografEkle,
            data: formData,
            processData: false,
            contentType: false,
            type: "POST",
            success: function (data) {
                alert("Files Uploaded!");
            }
        }
    );
}

它只在数据部分采用 formData。我想发送第二个数据。它不发送。可能 processData: false, contentType: false, 从我给的。但如果我不给他们，这次就不会发送照片。请帮我。

这是控制器中给出参数的地方：

[HttpPost]
public async Task<IActionResult> sliderFotoKayit(slider item, List<IFormFile> files)

标签： javascriptc#htmlajax

解决方案

我已经在 ASP.NET Core 3.1 上测试了您的代码，发现一次上传一个文件没有问题。

据我了解，您的问题是您不能一次选择和发送多个文件。

为了一次选择和发送多个文件，您的 html 输入标签必须具有一个multiple属性。否则，它一次只允许您选择一个文件。

<input onchange="uploadFiles('files');" class="form-control" type="file" id="files" multiple>

在作者提供更多上下文后更新：

对于您想在表单数据中发送的任何附加值，只需您自己的append(key: string, value: any)方法。

使用附加int字段更新了 JS：

function uploadFiles(inputId) {
    var input = document.getElementById(inputId);
    var files = input.files;
    var formData = new FormData();

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

    formData.append("id", 3); // append additional int field here

    $.ajax(
        {
            url: sliderFotografEkle,
            data: formData,
            processData: false,
            contentType: false,
            type: "POST",
            success: function (data) {
                alert("Files Uploaded!");
            }
        }
    );
}
</script>

接收文件的控制器方法签名和一个附加int字段：

[HttpPost]
public async Task<IActionResult> HandleFileUpload(int id, List<IFormFile> files)

更多细节：

当您将表单数据发送到服务器时，请求将具有content-type: multipart/form-data;. 由于一个 HTTP 请求只能有一种内容类型，因此有两种选择：

  • 最简单的方法：通过inputhtml 或formData.append(key, value)js 中的字段向表单添加新字段。建议这样做是因为：

    1. content-type: multipart/form-data;可以包括文件和 HTML 表单支持的任何其他类型。
    2. content-type: multipart/form-data;在 ASP.NET 中具有内置支持，因此表单内容将自动绑定到控制器方法参数。
  • 困难的方法：将formdata 序列化为字符串，然后返回content-type: application/json;. 如果您无法控制服务器，请执行此操作，通常是在您必须符合另一台服务器的 API 的情况下。这显然更灵活，但也更复杂。

您将能够以以下形式获取数据：

{
    "formData": serializedFormData, 
    "id": id
}

最大的缺点是服务器必须手动反序列化表单数据。

推荐阅读