使用WebApi、ajax上传文件 [英] Upload file using WebApi, ajax

问题描述

我想通过调用 ajax 使用 WebApi 上传文件，文件将保存到数据库中.我尝试了中给出的代码此链接.在这里，它将接收到的数据作为没有指定扩展名的文件保存到硬盘驱动器，但我想做一些事情，比如当我将文件保存到数据库时，如果我需要，我也想稍后保存文件名和扩展名要下载文件，我可以提供文件名和扩展名.在链接中，文件作为文件保存到硬盘驱动器，但有什么方法可以直接将文件保存到数据库.

解决方案

答案有几个部分.

首先，要上传文件，您可以使用带有如下代码的视图:

@using (Html.BeginForm()){<input type="file" value="选择文件"/><br/><input type="button" value="上传" id="上传"/>}@section 脚本{<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('文件',文件);$.ajax({url: '/Api/文件/上传',过程数据:假，内容类型:假，数据:数据，类型:'POST'}).完成(功能(结果){警报(结果)；}).失败(函数(a，b，c){控制台.log(a, b, c);});});});}

其次，要接收这些数据，创建一个控制器，方法如下:

公共类 FileController : ApiController{[HttpPost]公共异步任务上传(){var provider = new MultipartMemoryStreamProvider();等待 Request.Content.ReadAsMultipartAsync(provider);//提取文件名和文件内容var fileNameParam = provider.Contents[0].Headers.ContentDisposition.Parameters.FirstOrDefault(p => p.Name.ToLower() == "文件名");字符串文件名 = (fileNameParam == null) ?"" : fileNameParam.Value.Trim('"');byte[] file = await provider.Contents[0].ReadAsByteArrayAsync();//在这里，您可以将 EF 与具有 byte[] 属性的实体一起使用，或者//一个带有 varbinary 参数的存储过程来插入//数据进入数据库结果= string.Format("收到'{0}'，长度:{1}", fileName, file.Length);返回结果；}}

第三，默认情况下最大上传大小是有限的.你可以通过修改 web.config 来克服这个限制:

1. 在中添加maxRequestLength="max size in bytes".(或者如果它不存在就创建这个元素):

2. 将 maxAllowedContentLength 添加到 元素(或创建此元素，如果它不存在)

这些条目看起来像这样:

<预><代码><配置><system.web><!-- 千字节 --><httpRuntime targetFramework="4.5" maxRequestLength="2000000"/><配置><system.webServer><安全><请求过滤><!-- 字节--><requestLimits maxAllowedContentLength="2000000000"/>

注意:您应该将其包含在 元素中，以便此限制仅适用于上传文件的特定路径，如下所示:

<system.web>...<system.webServer>...

注意修改根 web.config，而不是 Views 文件夹中的那个.

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

公共类文件{公共 int FileId { 获取；放;}公共字符串文件名 { 获取；放;}公共字节 [] 文件内容 { 获取；放;}}

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

如果您使用存储过程，请创建一个具有 varbinary 参数的存储过程，并将 byte[] 文件 作为值传递.

I want to upload file using a WebApi by making an ajax call and the file will save into database. I tried the code given in the this link. Here, it is saved the received data to hard drive as a file with no extension specified but I want to do something like when I'm saving the file to Database I also want to save the file name and the extension cause later if I need to download the file I can provide the file name and extension with it. And in the link the file is saved to hard drive as a file but is there any way that I can directly save the file to DB.

解决方案

The answer has several parts.

First, to upload the file, you can use a view with code like this:

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

Second, to receive this data, create a controller, with a method like this:

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

Third, by default the maximum upload size is limited. You can overcome this limitations modifying web.config:

1. Add maxRequestLength="max size in bytes" in <configuration><system.web><httpRuntime>. (Or create this lement if it doesn't exist):

2. Add maxAllowedContentLength to <configuration><system.web><security><requestFiltering><requestLimits> element (or create this element if it doesn't exist)

These entries look like this:

<configuration>
  <system.web>
    <!-- kilobytes -->
    <httpRuntime targetFramework="4.5" maxRequestLength="2000000" />

<configuration>
  <system.webServer>
   <security>
    <requestFiltering>
      <!-- bytes -->
      <requestLimits maxAllowedContentLength="2000000000"/>

NOTE: you should include this inside a <location> element, so that this limits are only applied to the particular route where the files are uploaded, like this:

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

Beware to modify the root web.config, not the one in the Views folder.

Fourth, as to saving the data in the database, if you use EF, you simply need an entity like this:

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

Create a new object of this class, add to the context and save changes.

If you use stored procedures, create one which has a varbinary parameter, and pass the byte[] file as value.

这篇关于使用WebApi、ajax上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！