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

Question

我正在使用 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。我想发送第二个数据。它不发送。大概 处理数据：假， contentType: false，来自我给的。但如果我不给他们，这次就不会发送照片。请帮帮我。

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

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

Answer 1

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

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

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

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

---

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

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

更新了 JS，增加了一个 int 字段：

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 请求只能有一种内容类型，因此有两种选择：

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

  1. content-type: multipart/form-data; 可以包含文件和 HTML 表单支持的任何其他类型。
  2. content-type: multipart/form-data; 已在 ASP.NET 中内置支持，因此表单内容将自动绑定到控制器方法参数。

• hard方式：将formdata序列化为字符串，然后返回content-type: application/json;。如果您无法控制服务器，请执行此操作，通常是在您必须符合另一台服务器的 API 的情况下。这显然更灵活，但也更复杂。

您将能够获得以下表格中的数据：

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

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