angularjs上传图片插件使用

一. angurlajs 相关

远程 jar 包 https://code.angularjs.org/angular-1.0.1.min.js

 

二. 正文

1. html 部分

<!-- 需要引入的包 -->
<script src="/angular/angular.js"></script>
<script src="/angular-file-upload/ng-file-upload.js"></script>

<!-- html -->
<div ng-app="upload"><!-- 自定义ng-app的值 -->
　　<div ng-controller="uploadController"><!-- 自定义ng-controller的值 -->
　　　　<div ngf-select="upload($file)"></div><!-- upload是允许自定义的方法名 -->
　　</div>
</div>

 

2. js 部分

// 'upload' 是上面自定义的ng-app
var app = angular.module('upload', ['ngFileUpload']);
// 'uploadController' 是上面自定义的ng-controller
app.controller('uploadController',['$scope','Upload', function ($scope,Upload) {

    // upload是上面允许自定义的方法名
    $scope.upload = function (file) {
        if (file == null) {
            return;
        }
        Upload.upload({
            url: url,
            data: {file: file}
        }).then(function (result) {
            console.log(result);
        }, function (resp) {
            //console.log('Error status: ' + resp.status);
        }, function (evt) {
            //var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            //console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };
}]);