文档章节

angular上传图片插件

我有我
 我有我
发布于 2016/11/04 10:33
字数 417
阅读 636
收藏 1

1.安装插件

### Bower
```
bower install angular-file-upload
### NPM
```
npm install angular-file-upload

 

2.插件使用

(1)html文件

<div class="ibox-content" ng-controller="uploadController">
    <div class="row m-t imageFile">
        <form class="form-horizontal" name="form">
            <div class="form-line" style="margin-bottom: 15px;">
                <label>请选择图片:</label><span class="small-tip"></span>
                <button class="btn btn-w-m btn-info" type="button"
                        style="margin-left: 150px;margin-bottom: 15px;"
                        ng-click="UploadFile('banner-upload')">点击上传图片
                </button>
                <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="col-md-6">
                <img class="display-image" ng-if="image" ng-src="{{image}}" alt="">
            </div>
        </form>
    </div>
</div>

 

(2)通用js文件

选择图片后的一些函数处理及回调函数

angular.module('myApp.controllers')
    .controller('uploadController', 
                ['$scope', 'ApiConfig', 'FileUploader', '$timeout', '$rootScope', 'notify', 
                function ($scope,
                          ApiConfig,
                          FileUploader,
                          $timeout,
                          $rootScope,
                          notify) {
        var serverUrl = ApiConfig.API_HOST + "/admin/users/upload_avatar";

        //定义两个上传后返回的状态,成功或失败
        $scope.uploadStatus = false;

        $scope.broadcastName = '';


        var uploader = $scope.uploader = new FileUploader({
            url: serverUrl,
            queueLimit: 1,     //文件个数
            removeAfterUpload: true   //上传后删除文件

        });


        $scope.clearItems = function () {    //重新选择文件时,清空队列,达到覆盖文件的效果
            uploader.clearQueue();
        };


        // uploader.onAfterAddingFile = function (fileItem) {
        //     $scope.fileItem = fileItem._file;    //添加文件之后,把文件信息赋给scope
        //     //能够在这里判断添加的文件名后缀和文件大小是否满足需求。
        //     console.info('onAfterAddingFile', fileItem);
        // };


        uploader.onAfterAddingFile = function (fileItem) {
            $scope.fileItem = fileItem._file;    //添加文件之后,把文件信息赋给scope

            // console.info('onAfterAddingFile', fileItem);

            var fileReader = new FileReader();
            fileReader.readAsDataURL(fileItem._file);

            var loadFile = function (fileReader, index) {
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.image = e.target.result;


                    });
                };

            }(fileReader);
        };


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

            $scope.uploadStatus = true;   //上传成功则把状态改为true

            if (response.data.Location) {

                $rootScope.$broadcast($scope.broadcastName, {
                    imgUrl: response.data.Location
                });

            }

            notify({
                message: response.status.message,
                position: $rootScope.globalData.notify_position,
                duration: $rootScope.globalData.notify_duration
            });

        };


        $scope.UploadFile = function (broadcastName) {
            uploader.uploadAll();
            $scope.broadcastName = broadcastName;
        }


    }]);

 

(3)与html对应的controller文件

接收上传图片成功后发出的广播,并将相应变量进行赋值。

$rootScope.$on('banner-upload', function (event, option) {
    console.log('banner-upload');
    $scope.data.bannerDetail.banner_url_big = option.imgUrl;
});

 

 

 

© 著作权归作者所有

我有我
粉丝 5
博文 19
码字总数 8011
作品 0
徐汇
程序员
私信 提问
加载中

评论(1)

少司命-J
应该是angular.module('myApp.controllers',['angularFileUpload'])吧?
好像缺少样式:
<style>
  .file-name{
   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;
   text-decoration: none;/*去下划线*/
   border-style: solid;/*添加边框*/
   top: 14px;
  }
  a input{
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0;
  }
</style>
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7K
22
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
2018/08/05
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
68.4K
19
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
Cordova 和 Ionic 的区别

Cordova Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个...

华山猛男
2018/11/07
135
0

没有更多内容

加载失败,请刷新页面

加载更多

DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
3
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
6
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
5
0
Python机器学习之数据探索可视化库yellowbrick

背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维。陆续使用过plotly、seaborn,...

yeayee
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部