该示例中实际上应用了 jquery ajax(web client) + async web api 双异步。

jquery ajax post

 $.ajax({
type: "POST",
url: "/api/FileUpload",
contentType: false,
processData: false,
data: data,
success: function (results) {
ShowUploadControls();
$("#uploadResults").empty();
for (i = 0; i < results.length; i++) {
$("#uploadResults").append($("<li/>").text(results[i]));
}
},
error: function (xhr, ajaxOptions, thrownError) {
ShowUploadControls();
alert(xhr.responseText);
}
});

client端以post的方式发送数据。其中上传成功后的回调脚本定义在success处。

async Web API

Controller处Action返回值为Task<TResult>,本例中如下定义:

 public Task<IEnumerable<string>> Post()
{
... ...
}

而具体异步效果体现在“文件内容读取”和“后续处理”上。

 string fullPath = HttpContext.Current.Server.MapPath("~/Uploads");
CustomMultipartFormDataStreamProvider streamProvider = new CustomMultipartFormDataStreamProvider(fullPath);
var task = Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(t =>
{
if (t.IsFaulted || t.IsCanceled)
throw new HttpResponseException(HttpStatusCode.InternalServerError); var fileInfo = streamProvider.FileData.Select(i =>
{
var info = new FileInfo(i.LocalFileName);
return "File saved as " + info.FullName + " (" + info.Length + ")";
});
return fileInfo; });

ReadAsMultipartAsync

(From MSDN) 读取 MIME 多部分消息中的所有正文部分,并通过使用 streamProvider 实例确定每个正文部分内容的写入位置,来生成一组 HttpContent 实例作为结果。

Task.ContinueWith<TResult>

创建一个在目标 Task 完成时异步执行的延续任务。具体到该示例中,当 ReadAsMultipartAsync(读取)任务完成后,ContinueWith 中定义的行为才会作为延续而异步执行。

MultipartFormDataStreamProvider 对象

一个 IMultipartStreamProvider,适合与 HTML 文件上载一起使用,以将文件内容写入 FileStream。流提供程序将查看 <b>Content-Disposition</b> 标头字段,并根据 <b>filename</b> 参数是否存在来确定输出 Stream。如果 <b>Content-Disposition</b> 标头字段中存在 <b>filename</b> 参数,则正文部分将写入 FileStream 中;否则,正文部分将写入 MemoryStream 中。这将更加便于处理作为窗体数据和文件内容的组合的 MIME 多部分 HTML 窗体数据。

小技巧:lambda 表达式反转,从FileData到IEnumerable<string>

 var fileInfo = streamProvider.FileData.Select(i =>
{
var info = new FileInfo(i.LocalFileName);
return "File saved as " + info.FullName + " (" + info.Length + ")";
});

示例代码

ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析的更多相关文章

  1. ASP.NET Core WEB API 使用element-ui文件上传组件el-upload执行手动文件文件,并在文件上传后清空文件

    前言: 从开始学习Vue到使用element-ui-admin已经有将近快两年的时间了,在之前的开发中使用element-ui上传组件el-upload都是直接使用文件选取后立即选择上传,今天刚好做了 ...

  2. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

  3. .NET和.NET Core Web APi FormData多文件上传对比

    前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...

  4. Struts2 使用Jquery+ajax 文件上传

    话不多说 直接上代码 前台js: var formData = new FormData(); formData.append("file1",$("#file1&quo ...

  5. 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...

  6. [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件   This project attempts to ach ...

  7. 简单的jquery ajax文件上传功能

    /* * 图片上传 * 注意如果不加processData:false和contentType:false会报错 */ function uploadImage(image) { var imageF ...

  8. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  9. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

随机推荐

  1. Web | Webpack快速上手

    概述 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 一般我们在开发中都是使用终端去进行安装,使用npm,关于npm ...

  2. Z字形编排问题详解(C++)

    Z字形编排问题详解(C++): 问题描述:给定一个矩阵matrix,输出矩阵matrix进行Z字形编排后的内容. 原矩阵: 输出形式: 算法分析与详细解答: 要解决这样一个问题,可能一开始无从下手,但 ...

  3. svg路径动画心得

    svg动画,随着路线运动,项目中需要用到,接触的时候感觉很高级,但是不会-无从下手呀!于是在网上找相关资料,先借鉴再修改成自己的. <svg width="500" heig ...

  4. node 借助Node Binary管理模块“n”更新

    Node.js的版本频繁变化,如果有模块不能在你当前的Node版本上使用,需要升级Node环境 1)首先:查看当前node版本:node –v 2)安装n模块:npm install -g n 3)检 ...

  5. 给网页标签页添加logo

    先把logo转换成后缀名是ico的图片,然后在网页头部,也就是<head></head>中间放上<link rel="shortcut icon"ty ...

  6. php composer 实现类的自动加载

    我们在开发项目中会经常用到第三方的类库插件,但是如果每次需要使用的时候都会在代码的某一处去引入,然后在实例化,这样做感觉很不方便,那么怎么实现自动加载呢,下面简单介绍使用composer实现自动加载: ...

  7. 【非原创】Game23

    #include<stdio.h>int main(){ int n,m,x=0,flag=0; scanf("%d%d",&n,&m); x=m/n; ...

  8. PTA(Basic Level)-1076 Wifi密码

    一 题目介绍:     现将 wifi 密码设置为下列数学题答案:A-1:B-2:C-3:D-4.本题就要求你写程序把一系列题目的答案按照卷子上给出的对应关系翻译成 wifi 的密码.这里简单假设每道 ...

  9. C语言实现选择排序算法

    新人新气象,我又来了,C语言实现选择排序.很基础的东西,原理什么的就不扯了. #include <stdio.h> #include <stdlib.h> #include & ...

  10. Kettle-6.1安装部署及使用教程

    一.Kettle概念 Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,绿色无需安装,数据抽取高效稳定. Kettle 中文名称叫水壶,该项目的主 ...