通過 AngularJS 和 ASP.NET MVC5 實作檔案上傳

這是什麼?

如題所示,在這裡我将展示一種使用angular.js和asp.net mvc5 來實作上傳檔案非常簡單的方法.

為什麼這樣做?

網上已經有很多庫實作這個功能了.而我的方法會有什麼特别之處呢?如果你已經意識到這個問題了,是非常酷的.思考一下為什麼我們會被這個問題一直困擾呢?

我們的要求非常簡單,我有一個模型,如下:

我想在用戶端通過angular綁定一個模型,然後發送它到 asp.net mvc5的控制器.

我發現網上大部分庫都會遵循以下的方式

上傳檔案-->儲存-->在響應中傳回檔案的url

通過模型和url發送另外一個請求

這種方式存在一個普遍的問題:每次修改檔案,都将會上傳檔案到伺服器.而之前上傳的檔案不會被删除.是以我不希望發生這樣的事情,我認為你也不想.我将展示一種可以通過一次請求全部做完的方法.使用者可以随意多次修改檔案,當他們點選儲存之後,模型将會發送到伺服器.

為了實作功能,這裡我會用到html5的表單資料.我曾經為這個寫過一個分布式的angular子產品以便讓每個人都可以使用.讓我們來看看我的akfileuploader子產品.

至于這個子產品是什麼,我會給你一個簡短的解釋,他有一個directive(指令)和一個factory.

akfilemodel的指令: 他能響應式的為modelsetter改變檔案和隐藏檔案.

akfileuploader的服務: 它主要是建立一個表單資料和通過$http發送所需的url.

使用mvc架構

application.js

template

service:

controller(js):

mvc controller action: