前端AngularJS後端ASP.NET Web API上傳文件

来源:http://www.cnblogs.com/darrenji/archive/2016/02/03/5179480.html
-Advertisement-
Play Games

本篇體驗使用AngularJS向後端ASP.NET API控制器上傳文件。 首先服務端: public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task<HttpR


 

本篇體驗使用AngularJS向後端ASP.NET API控制器上傳文件。
    
首先服務端: 

 

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

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

 

客戶端主頁面:

index.html

<div ng-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

<div ng-controller="UploadCtrl"
    <input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>

 

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();
        }
    })

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • list是一種有序的集合,可以隨時添加和刪除其中的元素。定義有序的集合: classmates = ['Michael', 'Bob', 'Tracy'] 用len()函數可以獲得list元素的個數: len(classmates) 用索引來訪問list中每一個位置的元素,記得索引是從0開始的: c...
  • >>> print('The quick brown fox', 'jumps over', 'the lazy dog') The quick brown fox jumps over the lazy dog print()會依次列印每個字元串,遇到逗號“,”會輸出一個空格,因此,輸出的字元串是...
  • 試題描述: 有 n 個同學(編號為 1 到 n )正在玩一個信息傳遞的游戲。在游戲里每人都有一個固定的信息傳遞對象,其中,編號為 i 的同學的信息傳遞對象是編號為 T_i 的同學。游戲開始時,每人都只知道自己的生日。之後每一輪中,所有人會同時將自己當前所知的生日信息告訴各自的信息傳遞對象(註意:可能
  • 回到目錄 分頁組件網上有很多,MVC.Pager,JSPager等,通過實現方式大體分為前端分頁和後端分頁,前端分頁是前臺對list記憶體本地集合進行分頁,缺點就是在大數據情況下,記憶體占用過高;後端分頁就是UI把要返回的頁號告訴後臺,由後臺組織數據並返回,這種方法就是我們經常看到的了;而根據後臺集合種
  • 俗話說,自己寫的代碼,6個月後也是別人的代碼……複習!複習!複習!總結的知識點如下: 享元模式概念和實現例子 使用了享元模式的Java API String類 java.lang.Integer 的 valueOf(int)方法源碼分析 使用享元模式的條件 享元模式和單例模式的區別 前面的策略模式的
  • 序言 Nginx是lgor Sysoev為俄羅斯訪問量第二的rambler.ru站點設計開發的。從2004年發佈至今,憑藉開源的力量,已經接近成熟與完善。 Nginx功能豐富,可作為HTTP伺服器,也可作為反向代理伺服器,郵件伺服器。支持FastCGI、SSL、Virtual Host、URL Re
  • 回到目錄 IoC是解耦的靈魂,很難想像一個框架中沒有IoC會變成什麼樣子,Lind.DDD里的IoC是通過Unity實現的,由依賴註入(unity)和方法攔截組成(Interception),依賴註入可以通過事前定義好的實現方式去動態建立某個介面的實例,例如,在倉儲介面IRepository里,你可
  • 既然是游戲服務端程式員,那博客里至少還是得有一篇跟游戲服務端有關的文章,今天文章主題就關於游戲服務端。
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...