Question

问候语。

我想使用ajax将图像与描述一起上传到服务器。

fileupload工作正常，但我无法弄清楚如何提取输入的文本。

基本上表格如下：

<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
     }            
}

我尝试过的事情：

更改了Upload方法以获取名为fileText的字符串参数。
更改了脚本，也将文本附加到for循环中带有这两行的formdata：

var fileText = document.getElementById（＆＃39; fileText＆＃39;）;

formdata.append（fileText.value，fileText.value）

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

此致克里斯

Answer 1

更改了Upload方法以接受名为fileText的字符串参数。

正确。

更改了脚本以将文本附加到ford循环中这两行的formdata：

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

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

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

1 个答案: