您的位置:首页 > Web前端 > AngularJS

angularjs上传图片插件使用

2016-06-29 14:39 736 查看
一. 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);
});
};
}]);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: