今天跟大家分享的是一个依赖于angular的上传控件。

前段时间做项目遇到一个需求是上传文件，大概需要实现的样式是这样子的，见下图：

需要同时上传两个文件。并且规定文件格式和文件大小。因为前端框架使用angular，且不想因为一个上传功能又引入一个jquery，所以在网上查找基于angular的上传控件，因为angular还算比较新，貌似都没有太成熟的插件，网上的教程也大多是复制粘贴，总之没起倒多大的作用...但是皇天不负有心人，最后还是让我遇到了这个功能强大的插件，让我有种相见恨晚的感觉呀，依靠官方文档和师兄的帮助，终于搞清楚了基本的使用方法。好东西要分享，所以现在跟大家分享一下他的使用方法，如果大家正好需要使用，希望能帮到大家。

上传按钮的样式

首先我想先说一下上传文件的按钮样式，为什么呢？大家都知道上传会用到这个标签。<input type="file"/>,这行代码的默认样式真的有点不好看，见下图：

在一个稍微有点逼格的网站中，这样一个样式实在是有点损失形象了，而且如果需要在前面加一个输入框来显示文件名的话，那默认的显示文件名的区域怎么隐藏掉呢？别急，继续看：

用一个a标签包住input标签，然后把input标签的opacity设为0，就可以了嘛！ok，看代码：

html：

<div> <input class="filename" type="text" readonly="readonly" /> <a href="javascript:;" name="file"> <input type="file" name="key"/>浏览 </a> </div> <div> <input class="filename" type="text" readonly="readonly" /> <a href="javascript:;" name="file"> <input type="file" name="key"/>浏览 </a> </div>

然后是css文件：

.filename{ width: 300px; height: 30px; line-height: 30px; } a{ width: 50px; text-align: center; height: 30px; line-height: 30px; position: relative; cursor: pointer; overflow:hidden; display: inline-block; } a input{ position: absolute; left: 0; top: 0; opacity: 0; }

大功告成了！！！你看到的样式就变成了这样了，见下图：

你可以控制前面的输入框来显示你选择了的文件名，是不是好看多了呢？

angular-file-upload

惯例，首先贴出这个插件的github地址：点这里

这是插件的api使用文档地址：点这里

这是官方使用插件编写的例子：点这里

例子中能够找到我们需要的文件。例子中的es5-shim.min.js文件是为老的浏览器兼容而引入的，所以这个插件真的很强大呀。

---

然后我们来一步步使用这个插件来实现文件上传的功能吧。

这个插件定义了几个指令：nv-file-drop、nv-file-select、uploader

从单词意思来看应该不难猜出，第一个支持文件脱拽选择，第二个是点击选择，uploader用于绑定在控制器中新建的upload对象。

html文件

<form class="form-horizontal" name="form"> <div class="form-line"> <label>请选择证书文件：</label><span class="small-tip">证书文件只支持.pem格式，文件大小1M以内</span> <div class="choose-file-area"> <input class="file-name" type="text" readonly="readonly" ng-model="fileItem.name"/> <a href="javascript:;" class="choose-book"> <input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>浏览 </a> </div> </div> <div class="form-line"> <label>请选择私钥文件：</label><span class="small-tip">私钥文件只支持.key格式，文件大小1M以内</span> <

转载于:https://www.cnblogs.com/kms1989/p/5828944.html

相关资源：文件上传插件 ng-file-upload