热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

AngularJS向后端ASP.NETAPI控制器上传文件_AngularJS

这篇文章主要介绍了AngularJS向后端ASP.NETAPI控制器上传文件的相关资料,需要的朋友可以参考下
本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下

首先服务端:

public class FilesController : ApiController
{
  //using System.Web.Http
  [HttpPost]
  public async Task 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 = GetFormData(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

public class UploadDataModel
{
  public string testString1{get;set;}
  public string testString2{get;set;}
}
 

客户端主页面:

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

'use strict'

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

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

upload.js

'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上传文件的实现方法,希望对大家的学习有所帮助。

推荐阅读
  • 在使用Block时,正确的声明方法和确保线程安全是至关重要的。为了保证Block在堆中分配,应使用`copy`修饰符进行声明,因为栈中的Block与栈的生命周期绑定,容易导致内存问题。此外,还需注意Block捕获外部变量的行为,以避免潜在的循环引用和数据不一致问题。建议深入研究相关文档,以掌握更多高级技巧和最佳实践。 ... [详细]
  • 利用树莓派畅享落网电台音乐体验
    最近重新拾起了闲置已久的树莓派,这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多,我决定将其重新启用。恰逢落网电台进行了改版,回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐,便萌生了同样的想法。通过一番调试,终于实现了在树莓派上流畅播放落网电台音乐的功能,带来了全新的音乐享受体验。 ... [详细]
  • MongoVUE基础操作指南:轻松上手数据库管理
    本文介绍了MongoVUE的基础操作,旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具,虽然需要注册,但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法,并对一些常见的问题进行了修正和补充,确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]
  • 批量将多张图片转换为PDF或PPT文件
    本文介绍了如何批量将多张图片转换为PDF或PPT文件的方法。首先,可以通过批量下载工具或脚本高效地获取大量图片。接着,利用专业的图像处理软件或在线服务,将这些图片统一转换为所需的PDF或PPT格式,确保文件质量和一致性。此外,文中还提供了手动抓取单张图片进行初步测试的建议,以验证转换效果。 ... [详细]
  • 在使用 `requests` 库进行 HTTP 请求时,如果遇到 `requests.exceptions.SSLError: HTTPSConnectionPool` 错误,通常是因为 SSL 证书验证失败。解决这一问题的方法包括:检查目标网站的 SSL 证书是否有效、更新本地的 CA 证书库、禁用 SSL 验证(不推荐用于生产环境)或使用自定义的 SSL 上下文。此外,确保 `requests` 库和相关依赖项已更新到最新版本,以避免潜在的安全漏洞。 ... [详细]
  • 如何在 PHPStorm 2017 中禁用参数名称提示功能
    在 PHPStorm 2017 中,若需禁用参数名称提示功能,可在设置面板中通过搜索 "hints" 进入相关路径,具体为:编辑器 > 常规 > 外观 > 显示参数名称提示,并取消该选项前的勾选。这一操作将有效关闭参数名称提示,提升代码编辑的整洁度和专注度。 ... [详细]
  • 在解决区间相关问题时,我发现自己经常缺乏有效的思维方式,即使是简单的题目也常常需要很长时间才能找到解题思路,而一旦得到提示便能迅速理解。题目要求对一个包含n个元素的数组进行操作,并给出一个参数k,具体任务是…… ... [详细]
  • 随着CRM版本的更新,某些功能可能不再可用。本文探讨了一种高效的替代方案,通过编写 `function loadFrom()` 来识别和区分不同的编辑窗口。该方法利用了Xrm.Page对象的特性,确保在不同版本的CRM中都能稳定运行。此外,文章还详细介绍了如何通过检测页面类型和上下文信息来优化用户体验。 ... [详细]
  • Golomb 编码是一种高效的变长编码技术,专门用于整数的压缩。该方法通过预定义的参数 \( M \) 将输入整数分解为商 \( q \) 和余数 \( r \) 两部分。具体而言,输入整数除以 \( M \) 得到商 \( q \) 和余数 \( r \),其中商 \( q \) 采用一元编码表示,而余数 \( r \) 则使用二进制编码。这种编码方式在数据压缩和信息传输中具有显著的优势,特别是在处理具有特定概率分布的数据时表现出色。 ... [详细]
  • Redis哈希数据结构入门指南
    Redis的哈希数据结构与Java中的HashMap类似,采用数组加链表的方式实现。数组用于存储哈希值的位置,而链表则用于处理哈希冲突的情况。此外,Redis的哈希数据结构还支持高效的字段操作和内存优化,适用于多种应用场景,如缓存和会话管理。 ... [详细]
  • Java 中 print、println 和 printf 的功能与区别详解
    在 Java 中,`print` 方法将参数内容输出到控制台,并将光标停留在最后一个字符的后面。而 `println` 方法不仅显示参数内容,还会在输出结束后自动添加一个换行符,使下一次输出从新的一行开始。此外,`printf` 方法则提供了更灵活的格式化输出选项,允许用户通过指定格式字符串来控制输出的格式和样式。这三种方法各有特点,适用于不同的输出需求。 ... [详细]
  • 今天与一位老同事相约见面,讨论了我即将加入的新公司的情况及未来发展的初步规划。下班后,他在公司找到了我,晚上7点左右我们在凯德mall共进晚餐,选择了一家环境舒适的餐厅。这次交流不仅加深了我们的情谊,还为我的职业发展提供了宝贵的意见和建议。 ... [详细]
  • 本文探讨了利用Python编程语言开发自动化脚本来实现文件的全量和增量备份方法。通过详细分析不同备份策略的特点,文章介绍了如何使用Python标准库中的os和shutil模块来高效地管理和执行备份任务。此外,还提供了示例代码和最佳实践,帮助读者快速掌握自动化备份技术,确保数据的安全性和完整性。 ... [详细]
  • vtkGlyph3D 是一种强大的符号化可视化工具,能够将三维数据集中的每个点用预定义的几何图形(如球体或箭头)进行表示。该工具不仅支持自定义符号的方向和缩放比例,还能够在复杂的数据场中突出显示关键特征,从而提高数据的可解释性和可视化效果。通过这种方式,用户可以更直观地理解和分析三维数据集中的重要信息。 ... [详细]
  • 利用Flask框架进行高效Web应用开发
    本文探讨了如何利用Flask框架高效开发Web应用,以满足特定业务需求。具体案例中,一家餐厅希望每天推出不同的特色菜,并通过网站向顾客展示当天的特色菜。此外,还增加了一个介绍页面,在bios路径下详细展示了餐厅主人、厨师和服务员的背景和简介。通过Flask框架的灵活配置和简洁代码,实现了这一功能,提升了用户体验和餐厅的管理水平。 ... [详细]
author-avatar
zr8744814
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有