File API 文件上传 - 读取 ASP.NET MVC 中的 XMLHttpRequest

XML

使用File API可以在浏览器中实现文件的上传和读取操作。在ASP.NET MVC中，可以使用XMLHttpRequest对象来实现文件上传。本文将介绍如何使用File API和XMLHttpRequest对象进行文件上传，并提供一个案例代码。

什么是File API

File API是HTML5中的一个新API，它允许在客户端对文件进行操作。通过File API，我们可以访问用户选择的文件，并读取文件的内容，实现文件的上传、下载和预览等功能。

使用XMLHttpRequest对象进行文件上传

在ASP.NET MVC中，可以使用XMLHttpRequest对象来实现文件上传。XMLHttpRequest对象是一个用于在浏览器和服务器之间发送HTTP请求的JavaScript对象。通过XMLHttpRequest对象，我们可以将文件数据发送到服务器端，实现文件的上传。

下面是一个使用XMLHttpRequest对象进行文件上传的示例代码：

csharp
public ActionResult UploadFile(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        string fileName = Path.GetFileName(file.FileName);
        string path = Path.Combine(Server.MapPath("~/Uploads"), fileName);
        file.SaveAs(path);
    }
    return RedirectToAction("Index");
}

在上面的代码中，我们通过接受一个HttpPostedFileBase类型的参数来接收上传的文件。然后，我们可以通过file对象的属性来获取文件的信息，如文件名、大小等。接着，我们可以使用Server.MapPath方法来获取文件的保存路径，然后通过SaveAs方法将文件保存到服务器端。

文件上传的前端代码

在前端页面中，我们可以使用HTML的input元素来实现文件的选择，然后通过JavaScript来监听文件选择的事件，并将文件数据发送到服务器端。

下面是一个简单的文件上传的前端代码：

html
<input type="file" id="file-input" />
<script>
    var fileInput = document.getElementById('file-input');
    fileInput.addEventListener('change', function (event) {
        var file = event.target.files[0];
        var formData = new FormData();
        formData.append('file', file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/Home/UploadFile', true);
        xhr.send(formData);
    });
</script>

在上面的代码中，我们创建了一个input元素来实现文件选择，然后通过addEventListener方法来监听change事件。在change事件的处理函数中，我们获取选择的文件，并创建一个FormData对象来保存文件数据。然后，我们创建一个XMLHttpRequest对象，并使用open方法指定请求的方法和URL，然后通过send方法将文件数据发送到服务器端。

通过File API和XMLHttpRequest对象，我们可以在ASP.NET MVC中实现文件的上传和读取操作。使用File API，我们可以访问用户选择的文件，并读取文件的内容。使用XMLHttpRequest对象，我们可以将文件数据发送到服务器端，实现文件的上传。在前端页面中，我们可以使用input元素来实现文件选择，然后通过JavaScript来监听文件选择的事件，并将文件数据发送到服务器端。

参考代码

ASP.NET MVC中的文件上传示例代码可以在以下链接中找到：

AIn/aspnet/web-api/overview/advanced/sending-html-form-data-part-2/sending-html-form-data-to-the-server.md">https://github.com/MicrosoftDocs/aspnet-mvc-docs/blob/mAIn/aspnet/web-api/overview/advanced/sending-html-form-data-part-2/sending-html-form-data-to-the-server.md