上传文件与其他参数通过ajax在asp.net mvc

本文关键字：ajax asp net mvc 文件 其他 参数 | 更新日期: 2023-09-27 17:50:51

我使用c#在asp.net mvc中工作。

我想上传一个从文件浏览器窗口中选择的图像，并包含在表单标签中。

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

在同一视图中，我有其他字段不是表单的一部分。我通过ajax将这些字段转换为JSON对象..与此同时，我还想添加图像…

上传文件与其他参数通过ajax在asp.net mvc

由于问题不太清楚，我在这里展示了我假设的示例。

可以使用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);
                    }
                }
            }
        }

如果你想通过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+和其他现代浏览器。

相关文章：