AngularJS向后端ASP.NET API控制器上传文件
摘要：这篇文章主要介绍了AngularJS向后端ASP.NETAPI控制器上传文件的相关资料,需要的朋友可以参考下本文实例介绍了前端Angular...
这篇文章主要介绍了AngularJS向后端ASP.NET API控制器上传文件的相关资料,需要的朋友可以参考下
本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法，具体内容如下
首先服务端：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async TaskHttpResponseMessage Upload() { if(!Request.Content.IsMimeMultipartContent()) { this.Request.CreateResponse(HttpStatusCode.UnsuportedMediaType); } var provider = GetMultipartProvider(); var result = await Request.Content.ReadAsMultipartAsync(provider); //文件名类似"BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5"这样的格式 var originalFileName = GetDeserializedFileName(result.FileData.First()); var uploadFileInfo = new FileInfo(result.FileData.First().LocalFileName); //如果前端无表单数据，这里注销 var filleUploadObj = GetFormDataUploadDataModel(result); var returnData = "ReturnTest"; return this.Request.CreateResponse(HttpStatusCode.OK, new {returnData}); } private MultipartFormDataStreamProvider GetMultipartProvider() { //图片的上传路径 var uploadFolder = "~/App_Data/FileUploads"; //获取根路径 var root = HttpContext.Current.Server.MapPath(uploadFolder); //创建文件夹 Directory.CreateDirectory(root); return new MultipartFormDataStreamProvider(root); } //从Provider中获取表单数据 private object GetFormData(MultipartFormDataStreamProvider result) { if(result.FormData.HasKeys()) { var unescapedFormData = Uri.UnescapeDataString(result.FormData.GetValues(0).FirstOrDefault() ?? String.Empty); if(!String.IsNullOrEmpty(unescapedFormData)) { return JsonConvert.DeserializeObject(upescapedFormData); } } return null; } //获取反序列化文件名 private string GetDeserializedFileName(MultipartFileData fileData) { var fileName = GetFileName(fileData); return JsonConvert.DeserializedObject(fileName).ToString(); } //获取文件名 public string GetFileName(MultipartFileData fileData) { return fileData.Headers.ContentDisposition.FileName; } } |
UploadDataModel.cs
?| 1 2 3 4 5 6 | public class UploadDataModel { public string testString1{get;set;} public string testString2{get;set;} } |
客户端主页面：
index.html
?| 1 | div ng-include="'upload.html'"/div |
引用：
angular-file-upload-shim.jsangular.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
?| 1 2 3 | div ng-controller="UploadCtrl" input type="file" ng-file-select="onFileSelect($files)" multiple/div |
app.js模块依赖和全局配置。
app.js
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 'use strict' angular.module('angularUploadApp',[ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'angularFileUpload' ]) .config(function($routeProvider){ $routeProvider .when('/', { templateUrl: 'upload.html', controller: 'UploadCtrl' }) .otherwise({ resirectTo: '/' }) }) |
控制器提供上传和取消上传的方法。
upload.js
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 'use strict'; angular.module('angularUploadApp') .controller('UploadCtrl', function($scope, $http, $timeout, $upload){ $scope.upload = []; $scope.fileUploadObj = {testString1: "Test ring 1", testString2: "Test string 2"}; $scope.onFileSelect = function ($files) { //$files: an array of files selected, each file has name, size, and type. for (var i = 0; i $files.length; i++) { var $file = $files[i]; (function (index) { $scope.upload[index] = $upload.upload({ url: "./api/files/upload", // webapi url method: "POST", data: { fileUploadObj: $scope.fileUploadObj }, file: $file }).progress(function (evt) { // get upload percentage console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); }).success(function (data, status, headers, config) { // file is uploaded successfully console.log(data); }).error(function (data, status, headers, config) { // file failed to upload console.log(data); }); })(i); } } $scope.abortUpload = function (index) { $scope.upload[index].abort(); } }) |
以上就是前端AngularJS向后端ASP.NET Web API上传文件的实现方法，希望对大家的学习有所帮助。
【AngularJS向后端ASP.NET API控制器上传文件】相关文章：
★ JS或jQuery获取ASP.NET服务器控件ID的方法
★ JQuery插件ajaxfileupload.js异步上传文件实例
★ jQuery异步上传文件插件ajaxFileUpload详细介绍
★ 显示、隐藏密码
下一篇：
浅析javascript函数表达式