AngularJS向后端ASP.NET API控制器上传文件
本文实例介绍了前端AngularJS向后端ASP.NETWebAPI上传文件的实现方法,具体内容如下
首先服务端:
publicclassFilesController:ApiController { //usingSystem.Web.Http [HttpPost] publicasyncTask<HttpResponseMessage>Upload() { if(!Request.Content.IsMimeMultipartContent()) { this.Request.CreateResponse(HttpStatusCode.UnsuportedMediaType); } varprovider=GetMultipartProvider(); varresult=awaitRequest.Content.ReadAsMultipartAsync(provider); //文件名类似"BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5"这样的格式 varoriginalFileName=GetDeserializedFileName(result.FileData.First()); varuploadFileInfo=newFileInfo(result.FileData.First().LocalFileName); //如果前端无表单数据,这里注销 varfilleUploadObj=GetFormData<UploadDataModel>(result); varreturnData="ReturnTest"; returnthis.Request.CreateResponse(HttpStatusCode.OK,new{returnData}); } privateMultipartFormDataStreamProviderGetMultipartProvider() { //图片的上传路径 varuploadFolder="~/App_Data/FileUploads"; //获取根路径 varroot=HttpContext.Current.Server.MapPath(uploadFolder); //创建文件夹 Directory.CreateDirectory(root); returnnewMultipartFormDataStreamProvider(root); } //从Provider中获取表单数据 privateobjectGetFormData<T>(MultipartFormDataStreamProviderresult) { if(result.FormData.HasKeys()) { varunescapedFormData=Uri.UnescapeDataString(result.FormData.GetValues(0).FirstOrDefault()??String.Empty); if(!String.IsNullOrEmpty(unescapedFormData)) { returnJsonConvert.DeserializeObject<T>(upescapedFormData); } } returnnull; } //获取反序列化文件名 privatestringGetDeserializedFileName(MultipartFileDatafileData) { varfileName=GetFileName(fileData); returnJsonConvert.DeserializedObject(fileName).ToString(); } //获取文件名 publicstringGetFileName(MultipartFileDatafileData) { returnfileData.Headers.ContentDisposition.FileName; } }
UploadDataModel.cs
publicclassUploadDataModel { publicstringtestString1{get;set;} publicstringtestString2{get;set;} }
客户端主页面:
index.html
<divng-include="'upload.html'"></div>
引用:
- angular-file-upload-shim.js
- angular.js
- angular-file-upload.js
- angular-cookies.js
- angular-resource.js
- angular-sanitize.js
- angular-route.js
- app.js
- upload.js
upload.html部分视图页用来接受文件。
upload.html
<divng-controller="UploadCtrl" <inputtype="file"ng-file-select="onFileSelect($files)"multiple> </div>
app.js模块依赖和全局配置。
app.js
'usestrict' angular.module('angularUploadApp',[ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'angularFileUpload' ]) .config(function($routeProvider){ $routeProvider .when('/',{ templateUrl:'upload.html', controller:'UploadCtrl' }) .otherwise({ resirectTo:'/' }) })
控制器提供上传和取消上传的方法。
upload.js
'usestrict'; angular.module('angularUploadApp') .controller('UploadCtrl',function($scope,$http,$timeout,$upload){ $scope.upload=[]; $scope.fileUploadObj={testString1:"Testring1",testString2:"Teststring2"}; $scope.onFileSelect=function($files){ //$files:anarrayoffilesselected,eachfilehasname,size,andtype. for(vari=0;i<$files.length;i++){ var$file=$files[i]; (function(index){ $scope.upload[index]=$upload.upload({ url:"./api/files/upload",//webapiurl method:"POST", data:{fileUploadObj:$scope.fileUploadObj}, file:$file }).progress(function(evt){ //getuploadpercentage console.log('percent:'+parseInt(100.0*evt.loaded/evt.total)); }).success(function(data,status,headers,config){ //fileisuploadedsuccessfully console.log(data); }).error(function(data,status,headers,config){ //filefailedtoupload console.log(data); }); })(i); } } $scope.abortUpload=function(index){ $scope.upload[index].abort(); } })
以上就是前端AngularJS向后端ASP.NETWebAPI上传文件的实现方法,希望对大家的学习有所帮助。