使用WebApi，Ajax上传文件

使用WebApi，Ajax上传文件

答案分为几个部分。

首先，要上传文件，可以使用包含以下代码的视图：

@using (Html.BeginForm()){    <input type="file" value="Choose a file"/>    <br/>    <input type="button" value="Upload" id="upload"/>}@section scripts{<script type="text/javascript">    $(document).ready(function() {        $('#upload').click(function () { var data = new FormData(); var file = $('form input[type=file]')[0].files[0]; data.append('file',file); $.ajax({     url: '/Api/File/Upload',     processdata: false,     contentType: false,     data: data,     type: 'POST' }).done(function(result) {     alert(result); }).fail(function(a, b, c) {     console.log(a, b, c); });        });    });</script>    }

其次，要接收此数据，请使用以下方法创建一个控制器：

public class FileController : ApiController{    [HttpPost]    public async Task<string> Upload()    {       var provider = new MultipartMemoryStreamProvider();       await Request.Content.ReadAsMultipartAsync(provider);       // extract file name and file contents       var fileNameParam = provider.Contents[0].Headers.ContentDisposition.Parameters.FirstOrDefault(p => p.Name.ToLower() == "filename");       string fileName = (fileNameParam == null) ? "" : fileNameParam.Value.Trim('"');       byte[] file = await provider.Contents[0].ReadAsByteArrayAsync();       // Here you can use EF with an entity with a byte[] property, or       // an stored procedure with a varbinary parameter to insert the       // data into the DB       var result = string.Format("Received '{0}' with length: {1}", fileName, file.Length);       return result;    }}

第三，默认情况下，最大上传大小是有限的。您可以通过修改克服这些限制

web.config

：

1. 添加

   maxRequestLength="max size in bytes"

   在

   <configuration><system.web><httpRuntime>

   。（或创建该元素（如果不存在）：

2. 添加

   maxAllowedContentLength

   到

   <configuration><system.web><security><requestFiltering><requestLimits>

   元素（如果不存在则创建此元素）

这些条目如下所示：

<configuration>  <system.web>    <!-- kilobytes -->    <httpRuntime targetframework="4.5" maxRequestLength="2000000" /><configuration>  <system.webServer>   <security>    <requestFiltering>      <!-- bytes -->      <requestLimits maxAllowedContentLength="2000000000"/>

注意：您应该将此

<location>

元素包含在元素中，以便将此限制仅应用于文件上传的特定路径，如下所示：

<location path="Api/File/Upload">  <system.web>     ...  <system.webServer>     ...

注意修改根目录

web.config

，而不要修改

Views

文件夹中的根目录。

第四，关于将数据保存在数据库中，如果使用EF，则只需要一个像这样的实体：

public class File{  public int FileId { get; set; }  public string FileName { get; set; }  public byte[] FileContent { get; set; }}

创建此类的新对象，添加到上下文中并保存更改。

如果使用存储过程，请创建一个具有

varbinary

参数的过程，然后传递

byte[] file

as值。