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

Posted 2023-04-12

【中文标题】使用ajax将照片和多个数据发送到控制器

【英文标题】：Sending photos and multiple data to the controller with ajax

【发布时间】：2021-09-26 11:49:24

【问题描述】：

我正在使用 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)

【问题讨论】：

如果我理解正确，你想同时发送多张图片吗？

没有。我不会发送多个文件。我要发送的第二个数据是 int。价值。不归档。例如：Data:"formData":formData, "id": id As.....

【参考方案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)。建议这样做是因为：

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

hard

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

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

    "formData": serializedFormData, 
    "id": id

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

【讨论】：

multiple 属性是 HTML 内置的。对于将输入字段中的所有文件追加到FormData中，作者的js代码中已经有一个循环。

没有。我不会发送多个文件。我要发送的第二个数据是 int。价值。不归档。例如：Data:"formData":formData, "id": id As.....

天啊。我以前做过同样的事情，但没有奏效。但既然你这么说了，我又做了同样的事情，它奏效了。但一切都是一样的。难以置信 :D 还是谢谢你

那么我们如何删除文件夹中的照片呢？

应该是另一种控制器方法，带有一些参数来选择要删除的文件。然后该方法内部的逻辑执行 system.io 方法来删​​除磁盘上的文件。