完成的事情：

图片上载插件测试完成并对企业的“新增/编辑”完成布局。

测试日期插件并布局（存在BUG）

计划的事情：

完成日期插件问题，写各个编辑页面的数据检验内容

问题：

file-upload插件，加载

<script src="http://nervgh.github.io/js/es5-sham.min.js"></script>

<script src="frame/angular-upload/console-sham.js"></script>

<script src="frame/angular-upload/dist/angular-file-upload.min.js"></script>

这三个文件，

在控制器隔壁写上nv-file-drop="" uploader="uploader"这样的玩意

然后下面的内容（限定每项加载一个图片）

<input type="file" nv-file-select="" uploader="uploader1" ng-click="uploader1.queue[0].remove()" />

<div class="pic">

<div ng-repeat="item in uploader1.queue" ng-show="uploader1.isHTML5" ng-thumb="{ file: item._file, height: 130 ,width:290}"></div>

</div>

<table class="tablestyle" style="BORDER-COLLAPSE: collapse" borderColor=#999 cellSpacing=0 align=center bgColor=#ffffff border=1 width="660px">

<tr>

<td width="20%">图片名</td>

<td width="15%">文件大小</td>

<td width="27%">进度</td>

<td width="10%">操作</td>

<td width="28%">操作</td>

</tr>

<tr>

<td>{{ uploader1.queue[0].file.name }}</td>

<td ng-show="uploader1.isHTML5" nowrap>{{ uploader1.queue[0].file.size/1024|number:0 }} KB</td>

<td style="padding:0 10px;">

<div class="progress" style="margin-bottom:8px;width:70%;float:left;">

<div class="progress-bar" style="margin-top:0;" role="progressbar" ng-style="{ 'width': uploader1.queue[0].progress + '%' }"></div>

</div>

<div style="">{{uploader1.queue[0].progress + '%'}}</div>

</td>

<td><span ng-if="uploader1.queue[0].isSuccess">&radic;</span></td>

<td nowrap>

<button type="button" class="btn btn-success btn-sm" ng-click="uploader1.queue[0].upload()" ng-disabled="uploader1.queue[0].isReady || uploader1.queue[0].isUploading || uploader1.queue[0].isSuccess">

<span class="glyphicon glyphicon-upload"></span>上传

</button>

<button type="button" class="btn btn-danger btn-sm" ng-click="uploader1.queue[0].remove()">

<span class="glyphicon glyphicon-trash"></span>删除

</button>

</td>

</tr>

</table>

根据官网的示例，很容易得出这样的布局。

当同一界面需要多个图片上载模块，只需要在<input type="file" uploader=""/>的uploader中建立不同的名称，然后分别使用即可

其中的图片展示，如果直接使用uploader1.queue[0]，发现图片展示不出来，只好还是使用ng-repeat弄一下，由于时间问题，就先不去看源码了，以后再说吧

然后在js文件中复制了这一串玩意，其中queueLimit可限制上传文件的数组长度，url使用的js任务时候的图片上传接口

下面的很多方法和返回的数据，可选用有用的东西，其中

uploader1.onSuccessItem = function(fileItem, response, status, headers) {

console.info('onSuccessItem', fileItem, response, status, headers);

};

的方法中，response为接口返回的数据，上传成功时候使用这个赋值就行。

git上好像有api文档，如果想要使用其他功能或者了解一下详情，可去看一下

var uploader1 = $scope.uploader1 = new FileUploader({

url: '/carrots-admin-ajax/a/u/img/test',

queueLimit: 1

});

// FILTERS

uploader1.filters.push({

name: 'imageFilter1',

fn: function(item /*{File|FileLikeObject}*/, options) {

var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';

return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;

}

});

// CALLBACKS

uploader1.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {

console.info('onWhenAddingFileFailed', item, filter, options);

};

uploader1.onAfterAddingFile = function(fileItem) {

console.info('onAfterAddingFile', fileItem);

};

uploader1.onAfterAddingAll = function(addedFileItems) {

console.info('onAfterAddingAll', addedFileItems);

};

uploader1.onBeforeUploadItem = function(item) {

console.info('onBeforeUploadItem', item);

};

uploader1.onProgressItem = function(fileItem, progress) {

console.info('onProgressItem', fileItem, progress);

};

uploader1.onProgressAll = function(progress) {

console.info('onProgressAll', progress);

};

uploader1.onSuccessItem = function(fileItem, response, status, headers) {

console.info('onSuccessItem', fileItem, response, status, headers);

};

uploader1.onErrorItem = function(fileItem, response, status, headers) {

console.info('onErrorItem', fileItem, response, status, headers);

};

uploader1.onCancelItem = function(fileItem, response, status, headers) {

console.info('onCancelItem', fileItem, response, status, headers);

};

uploader1.onCompleteItem = function(fileItem, response, status, headers) {

console.info('onCompleteItem', fileItem, response, status, headers);

};

uploader1.onCompleteAll = function() {

console.info('onCompleteAll');

};

console.info('uploader1', uploader1);

收获：

复盘项目进度