在 asp.net mvc 中使用 Ajax 将文件和文本上传到服务器

Question

问候。

我想使用 ajax 将图片连同描述一起上传到服务器。

文件上传工作正常，虽然我不知道如何提取输入的文本。

表格基本上是这样的：

<form id="uploader">
     <input id="fileInput" type="file" multiple>
     <input type="text" id="fileText" name="fileText" value=" " />
     <input type="submit" value="Upload file" />
</form>

上传到服务器的脚本如下所示：

document.getElementById('uploader').onsubmit = function () {
        var formdata = new FormData(); //FormData object
        var fileInput = document.getElementById('fileInput');
        //Iterating through each files selected in fileInput
        for (i = 0; i < fileInput.files.length; i++) {
            //Appending each file to FormData object
            formdata.append(fileInput.files[i].name, fileInput.files[i]);
        }
        //Creating an XMLHttpRequest and sending
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/Controller/Action');
        xhr.send(formdata);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
            }
        }
        return false;
    }

在服务器端，在相关操作的控制器中：

public JsonResult Upload(){
     for (int i = 0; i < 9; i++){
           HttpPostedFileBase file = Request.Files[i]; //Uploaded files
           //Do stuff with uploaded files
     }            
}

我尝试过的：

1. 将 Upload 方法更改为采用名为 fileText 的字符串参数。

2. 更改了脚本以在 for 循环中使用这两行将文本附加到表单数据：

   var fileText = document.getElementById('fileText');

   formdata.append(fileText.value, fileText.value)

我可能在两次试验中都遗漏了一些东西，但我似乎无法弄清楚是什么。请帮忙！

问候， 克里斯

Answer 1

1. 将 Upload 方法更改为采用名为 fileText 的字符串参数。

正确。

1. 更改了脚本，以便在 for 循环中使用这两行将文本也附加到 formdata：

不正确。您不应该在循环内执行此操作，因为您只有一个文本输入字段，因此您只能发送 1 个值。所以把这段代码移到循环之外。此外，您应该在附加到必须与您的控制器操作参数名称匹配的 FormData 时指定正确的名称：

var fileText = document.getElementById('fileText');
formdata.append('fileText', fileText.value);