通过 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: