[成都|荣耀师兄]JS-郑明月|2017年02月20日的日报-技能树.IT修真院

发表于： 2017-02-20 23:06:02

1 1092

一、今天完成的事情：

1.完成了新增工作页面的逻辑包括图片选择、公司行业复选（其实就是学习了这两个插件）。

二、明天要做的事情：

1.彻底完成新增工作页面，现在只差表单验证这一块，顺便再复习一下。

2.开始职位页面的渲染、修改一下模态框，写为指令能够复用。

三、遇到的问题：

关于指令：它的@是可以声明一个属性，该属性在使用指令的时候需要写一个值进去，如果没有就为空咯，不会绑定咯。

关于upload插件，现在不太熟悉，但是我可以肯定的是，它很简单，并且具有以下几个特点：

1.它的名字：angular-file-upload，它在btcn上的地址：http://www.bootcdn.cn/angular-file-upload/，进入这个地址就能够看到它很多信息，包括它的cdn，在引入的时候只需要引入这一个cdn就行了。

2.在app中如何注入：'angularFileUpload'写入这个字段就可以了。

3.在控制器中如何使用，首先我们需要在控制器中注入FileUploader这个东西，然后new一个新的FileUploader对象，然后就可以操作了，贴代码：

controller:function ($scope) {
    var uploader = $scope.uploader = new FileUploader({
        url:getAdminSercive.uploadImg()
    })
    /*添加过滤规则，这个是只能上传图片*/
    uploader.filters.push({
        name:'imageFilter',
        fn: function (item/*这是传入的需要过滤的东西*/,options) {
            var type = '|'+item.type.slice(item.type.lastIndexOf('/') + 1) + '|'; /*确认传入文件的后缀*/
            return 'jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;    //确认后缀是不是图片
        }
    })

我这样写是因为我这个东西是写在指令中的，下面那个是写了个过滤文件的指令，确认图片的后缀，在要上传图片的地方写明 filters = "name"，如果需要改变文件类型，只需要把下面的这些后缀改了就行了。

4.在页面中如何使用：nv-file-over 定义拖拽，还可以声明一个overclass还不知道具体是什么意思，nv-file-select代表的是选择点击框，可以配合原生的input file使用。

5.上传的文件如何预览各种信息：我们的信息用对象的形式存在uploader对象的queue属性中，如果用表格的形式展示的话，只需要ng-repeat="item in uploader .queue"就出来了；

属性列表

item.file.name	上传的文件的名字
item.progress	上传进度，配合各种框架的进度条能够显示进度
item.isSuccess	上传成功，配合打印出成功状态
item.isCancel	上传取消，对应取消状态
item.isError	上传失败，对应上传错误状态
item.upload()方法	确认开始上传
item.cancel()方法	取消上传
item.remove()方法	清除上传文件
uploader.uploadAll()方法	上传全部文件
uploader.cancelAll()方法	全部取消上传
uploader.clearQueue()方法	清除已上传列表

以上的前提都是你给它全部repeat出来了，单个要上传还是需要表格模式。

写为指令的时候，需要注意要把它的各种东西都写在指令的controller里边，不然不会正常显示。

在控制器中还有各种方法可以调用，就不一一总结了，扔在下面了：

uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
    console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
    console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
    console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
    console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
    console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
    console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
    console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
    console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
    console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
    console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
    console.info('onCompleteAll');
};