AngularJS向后端ASP.NET API控制器上传文件

前端之家收集整理的这篇文章主要介绍了AngularJS向后端ASP.NET API控制器上传文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件实现方法,具体内容如下

首先服务端:

Upload() { if(!Request.Content.IsMimeMultipartContent()) { this.Request.CreateResponse(HttpStatusCode.UnsuportedMediaType); }
var provider = GetMultipartProvider();
var result = await Request.Content.ReadAsMultipartAsync(provider);

//<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>名类似"BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5"这样的格式
var originalFileName = GetDeserializedFileName(result.FileData.First());

var uploadFileInfo = new FileInfo(result.FileData.First().LocalFileName);

//如果前端无表单数据,这里注销
var filleUploadObj = GetFormData<UploadDataModel>(result);

var returnData = "ReturnTest";
return this.Request.CreateResponse(HttpStatusCode.OK,new {returnData});

}

private MultipartFormDataStreamProvider GetMultipartProvider()
{
//图片上传路径
var uploadFolder = "~/App_Data/FileUploads";

//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>根路径
var root = HttpContext.Current.Server.MapPath(uploadFolder);

//创建<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>夹
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<T>(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

客户端主页面

index.html

引用:

  • 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

app.js模块依赖和全局配置。

app.js

angular.module('angularUploadApp',[
'ngCookies','ngResource','ngSanitize','ngRoute','angularFileUpload'
])
.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'upload.html',controller: 'UploadCtrl'
})
.otherwise({
resirectTo: '/'
})
})

控制器提供上传和取消上传方法

upload.js

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,config) {
        // file <a href="https://www.jb51.cc/tag/Failed/" target="_blank" class="keywords">Failed</a> to upload
        console.log(data);
      });
    })(i);
  }
}

$scope.abortUpload = function (index) {
  $scope.upload[index].abort();
}

})

以上就是前端AngularJS向后端ASP.NET Web API上传文件实现方法,希望对大家的学习有所帮助。

原文链接:/js/50210.html

猜你在找的JavaScript相关文章