通过Ajax在ASP.NET MVC中上传带有其他参数的文件

Question

我正在使用C#编写ASP.NET MVC。

我想要上传一个从文件浏览窗口中选择并且包含在form标签内的图片。

<form id="uploader" method="post" enctype="multipart/form-data">
 <input type="file" name="file" id="fileInput"/>

在同一个视图中，我有其他不是表单的字段。我通过将它们转换为JSON对象来通过ajax发送这些字段。同时，我还想添加图片...请帮助我完成这个任务...

- Praseedha

---

展示你的 JSON 代码！ - Jegadeesh

展示一下你的 JSON 传递参数。 - Dinesh

请使用我几个月前发布的示例 https://dev59.com/yGMk5IYBdhLWcg3wtQBd#19044689 - Ashwini Verma

Answer 1

作为问题不是很清晰，我在这里展示一下我所假设的例子。

你可以使用 jquery 表单插件。 添加 jquery 表单插件。

<script src="http://malsup.github.com/jquery.form.js"></script>

ViewPage

@using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    //I assume other fields are 
    <input id="FirstName" name="FirstName" type="text"/>
    <input id="LastName" name="LastName" type="text"/> 
    //Image upload
    <input type="file" name="files"> 
    <br>
    <input type="submit" value="Upload File to Server">
}

控制器

        [HttpPost]
        [ValidateAntiForgeryToken]
        public void YourAction(IEnumerable<HttpPostedFileBase> files, string FirstName, string LastName)
        {
            if (files != null)
            {
                foreach (var file in files)
                {
                    // Verify that the user selected a file
                    if (file != null && file.ContentLength > 0)
                    {
                        // extract only the fielname
                        var fileName = Path.GetFileName(file.FileName);
                        // TODO: need to define destination
                        var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                        file.SaveAs(path);
                    }
                }
            }
        }

- Ashwini Verma

Answer 2

如果您想通过AJAX发送文件，可以使用HTML5 FileReader API。

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

该API允许您读取文件的内容（来自https://developer.mozilla.org/en-US/docs/Web/API/FileReader）：

FileReader.readAsArrayBuffer()

开始读取指定 Blob 的内容，一旦完成，result 属性将包含表示文件数据的 ArrayBuffer。

FileReader.readAsBinaryString()

开始读取指定 Blob 的内容，一旦完成，result 属性将包含文件的原始二进制数据作为字符串。

FileReader.readAsDataURL()

开始读取指定 Blob 的内容，读取完成后，result 属性包含一个 data: URL，代表文件的数据。

FileReader.readAsText()

开始读取指定 Blob 的内容，一旦完成，result 属性将包含文件内容作为文本字符串。

然后，您可以将文件内容与其他数据一起发送为 Base64 编码的字符串。

请注意，此功能仅适用于 IE10+ 和其他现代浏览器。

- Tommi Gustafsson