Asp.Net框架WebAPI 2文件上传和下载的前端接口由Ajax实现

一.项目结构

1.App_Start配置了跨域访问，避免因跨域问题导致请求无法提交。具体跨域配置方式如下，请自行跳过。

跨域配置：NewGet安装dll Microsofg。AspNet.Cors

然后在App_Start文件夹下的WebApiConfig.cs中编写跨域配置代码。

公共静态类WebApiConfig {公共静态void Register(HttpConfiguration Config){//Web API配置和服务//Web API路由config。maphttpattributorates()；//web API配置和服务//跨域配置//需要从nu get config . enablecors(new enablecorattribute(' * '，* '，*))引用；配置。routes . MapHttpRoute(name : ' DefaultAPI '，Routetemplates : ' API/{ controller }/{ id } '，Defaults 3360 new { id=RouteParameter。可选})；//如果配置全局过滤器输入，则不需要写入属性//config。过滤器。添加(新应用。WebApi . filters . exceptionattribute _ DG())；}}即使跨域完成，也请自行测试。

2.创建两个新的控制器，一个图片控制器和一个文件控制器。当然，图片也是文件。在这里，图片和文件以不同的方式处理。因为图片方式的文件上传不成功，换个方式吧。如果这里有更好的方法，请随时给我们建议！

二、项目代码

1.先说说图像上传下载控制器的界面。这里没什么好说的，就拿一个带有Get的文件，参数就是文件的全名；发布后上传文件；直接编码。

使用QX_Frame .App。WebApi使用QX_Frame .文件中心。助手；使用QX_Frame .助手_ DG使用QX_Frame .助手_DG .延伸；使用系统；使用系统。集合。通用；使用系统。诊断；使用系统IO；使用系统Linq .使用系统。净值；使用系统. Net。超文本传送协议（Hyper Text Transport Protocol的缩写）使用系统. Net。Http。头球使用系统。文字；使用系统。线程化。任务；使用系统网络。http:/* * *作者：小琪*创建：2017-5-26 16:54:46 * */命名空间QX_Frame .文件中心。控制器{公共类PictureScontroler : WebApicontrolerBase {//Get : API/Pictures public Httpresponsemessage Get(字符串文件名){ Httpresponsemessage结果=null目录信息目录信息=新目录信息(IO_Helper_DG .' RootPath_MVC @ '文件/图片');文件信息找到文件信息=目录信息GetFiles().其中(x=x .名称==文件名)。first ordefault()；if (foundFileInfo！=null) { FileStream fs=新的文件流(foundFileInfo .全名，文件模式。开放);结果=新的http响应消息(Httpstatuscode .OK)；结果内容=新流内容(fs)；结果。内容。标题。内容类型=新系统净。Http。标题。mediatypeheadervalue('应用程序/八位字节流');结果内容。标题。内容处置=新的内容处置头值('附件');结果。内容。标题。内容处置。文件名=文件信息。名称；} else { result=new HttpResponseMessage(HttpStatusCode .未找到);}返回结果；}//POST : API/图片公共异步TaskIHttpActionResult Post() { if(！请求内容。ismimemultimecontent()){ 0抛出新的异常_DG('不支持的媒体类型',2005);}字符串根=IO_Helper_DG .RootPath _ MVCIO_Helper_DG .CreateDirectoryIfNotExist(根/temp ')；var provider=new multipperformadatastreamprovider(root '/temp ')；//读取表单数据。等待请求内容。ReadAsMultipartAsync(提供程序);列表字符串文件名列表=新列表字符串()；StringBuilder sb=new StringBuilder()；long FileTotalSize=0；int文件索引=1；//这说明了如何获取文件名foreach(提供程序中的多部分文件数据文件.文件数据){//新文件夹字符串新根目录=根目录@“文件/图片”；IO_Helper_DG .createdirectoryinotexist(新根目录)；如果（文件。存在（文件本地文件名)){//新文件名字符串文件名=文件.标题。内容处置。文件名。子串(1，文件标题。内容处置。文件名。长度-2)；字符串新文件名=Guid .NewGuid()" "文件名。拆分('.')[1];字符串新的完整文件名=新的根目录/'新文件名；文件名列表。添加($ '文件/图片/{新文件名} ');文件信息文件信息=新文件信息（文件本地文件名)；文件总大小=文件信息.长度；某人(某人的简写)追加($ ' # {文件索引}上传的文件： {新文件名} ({文件信息长度}字节)');文件索引文件。移动（文件。本地文件名，新完整文件名);追踪写线('复制了一个文件，文件路径=“新的完整文件名”)；} }返回Json(Return_Helper .success _ Msg _ Data _ DCount _ HttpCode($ ' { FileNameList .已成功上载计数}个文件/{ filettotalsize }个字节！细节. ToString()} '，文件名列表，文件名列表。计数));} }}里面可能有部分代码在助手帮助类里面写的，其实也仅仅是获取服务器根路径和如果判断文件夹不存在则创建目录，这两个代码的实现如下：

公共静态字符串RootPath_MVC { get { return System .网络。httpcontext。当前。服务器。map path(' ~ ')；} }//创建目录公共静态bool CreateDirectoryIfNotExist(字符串文件路径){ if(！目录。存在（文件路径)){目录创建目录(文件路径);}返回真}2。文件上传下载接口和图片大同小异。

使用QX_Frame .App。WebApi使用QX_Frame .文件中心。助手；使用QX_Frame .助手_ DG使用系统。集合。通用；使用系统。诊断；使用系统IO；使用系统Linq .使用系统。净值；使用系统. Net。超文本传送协议（Hyper Text Transport Protocol的缩写）使用系统. Net。Http。头球使用系统。文字；使用系统。线程化。任务；使用系统网络.使用系统网络。http:/* * *作者：小琪*创建：2017-5-26 16:54:46 * */命名空间QX_Frame .文件中心。控制器{公共类文件控制器： webapicontrolerbase {//Get : API/Files public HttpResponseMessage Get(字符串fileName){ HttpResponseMessage结果=null目录信息目录信息=新目录信息(IO_Helper_DG .RootPath _ MVC @ ' Files/Files ')；文件信息找到文件信息=目录信息GetFiles().其中(x=x .名称==文件名)。first ordefault()；if (foundFileInfo！=null) { FileStream fs=新的文件流(foundFileInfo .全名，文件模式。开放);结果=新的http响应消息(Httpstatuscode .OK)；结果内容=新流内容(fs)；结果。内容。标题。内容类型=新系统净。Http。标题。mediatypeheadervalue('应用程序/八位字节流');结果内容。标题。内容处置=新的内容处置头值('附件');结果。内容。标题。内容处置。文件名=文件信息。名称；} else { result=new HttpResponseMessage(HttpStatusCode .未找到);}返回结果；}//POST : API/Files公共异步TaskIHttpActionResult POST(){//获取服务器根物理路径字符串根=IO_Helper_DG .RootPath _ MVC//新文件夹字符串新根目录=根目录@ '文件/文件/'；//如果不创建，检查路径是否存在createdirectoryinotexist(新根目录)；列表字符串文件名列表=新列表字符串()；StringBuilder sb=new StringBuilder()；long FileTotalSize=0；int文件索引=1；//从请求HttpFileCollection files=HttpContext获取文件。当前。请求。文件等待任务。在文件中运行(()={ foreach (var f .all Keys){ HttpteddFile file=files[f]；if(！字符串IsNullOrEmpty(文件FileName)){字符串文件localfullname=新根目录文件。文件名；文件。另存为（文件本地全名);文件名列表。添加($ '文件/文件/{文件. FIlename } ')；文件信息文件信息=新文件信息（文件本地全名);文件总大小=文件信息.长度；某人(某人的简写)追加($ ' # {文件索引}上传的文件： {文件。文件名} ({文件信息长度}字节)');文件索引追踪写线('复制了一个文件，文件路径=' FileLocalFullName ')；} } });返回Json(Return_Helper .success _ Msg _ Data _ DCount _ HttpCode($ ' { FileNameList .已成功上载计数}个文件/{ filettotalsize }个字节！细节. ToString()} '，文件名列表，文件名列表。计数));} }}实现了上述两个控制器代码以后，我们需要前端代码来调试对接，代码如下所示。

！doctypehead脚本src=' http : jquery-3。2 .0 .量滴js /脚本！-script src=' http : jquery-1。11 .1 .js '/script-！-脚本src=' http : ajaxfile上传。js '/script-script $(文档)。ready(function(){ var appDomain=' http://localhost :3997/'；$('#btn_fileUpload ').click(function () { /** *用创建交互式、快速动态网页应用的网页开发技术方式上传文件-* *////-ASP。网络应用编程接口文件上传//var formData=new formData($(' # uploadForm ')[0])；$.Ajax({ URL : appDomain ' API/Files '，type: 'POST '，data: formData，async: false，cache: false，contentType: false，processData: false，success 3360 function(数据){ console。日志(JSON。stringify(数据))；}，错误：函数（数据){ console.log(JSON.stringify(数据));} });///-结束ASP。网络应用编程接口文件上传///。net core web API文件上传//var文件上传=$(' # files ').get(0)；//var file=文件上传。文件；//var data=new FormData()；//for(var I=0；我。文件。长度；I){//数据。追加(文件[I]).名称、文件[I])；//} //$.ajax({ //type: 'POST '，//url: appDomain 'api/Files '，//contentType: false，//processData: false，//data: data，//success : function(data){//console。日志(JSON。stringify(数据))；//}，//错误：函数(){//控制台。日志(JSON。stringify(数据))；//} //});//-端网核心web API文件上传/* * * Ajax文件上传。射流研究…方式上传文件* *///$.Ajax文件上传({//类型： ' post '，//url: appDomain 'api/Files '，//securer i: false，//filelementid : ' Files '，//success:函数（数据){ //console.log(JSON.stringify(数据));//}，//错误：函数(){//控制台。日志(JSON。stringify(数据))；//} //});});//结束点击})/脚本/标题/标题正文文章标题H2文章-表单/H2/head p表单操作='/'方法=' post ' id='上传表单' enctype='多部分/表单-数据'输入类型=' file ' id=' files ' name=' files ' placeholder=' file ' multiplefile-multiple属性可以选择多项brbr输入类型='button' id='btn_fileUpload '值='文件上传'/表单/p/文章/正文至此，我们的功能已全部实现，下面我们来测试一下：

可见，文件上传成功，按预期格式返回！

下面我们测试单图片上传-

然后我们按返回的地址进行访问图片地址。

发现并无任何压力！

下面测试多图片上传-

完美~

至此，我们已经实现了WebApi2文件和图片上传，下载的全部功能。

这里需要注意一下Web.config的配置上传文件支持的总大小，我这里配置的是最大支持的文件大小为1MB

请求过滤请求限制maxAllowedContentLength=' 1048576 '/请求过滤系统。web服务器处理程序移除名称=' extenslessurlhhandler-Integrated-4.0 '/移除名称='OPTIONSVerbHandler' /移除名称='TRACEVerbHandler' /添加名称=' extenslessurlhhandler-Integrated-4.0 '路径='* '动词='* '类型='系统.网络。经手人。传输请求处理程序' preference='集成模式，runtimeversionv 4.0 '/处理程序安全请求筛选请求限制maxAllowedContentLength=' 1048576 '/！-1MB-/请求过滤/安全/系统。web服务器以上所述是小编给大家介绍的WebApi2文件图片上传与下载功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！