angular-file-upload
<div id="page-title">
<h2 class="title-hero" ng-if="!isEdit">
{{'Create Tenant'|translate}}
</h2>
<h2 class="title-hero" ng-if="isEdit">
{{'Edit Tenant'|translate}}
</h2>
</div>
<div class="panel">
<div class="panel-body">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
{{'Basic Info'|translate}}
</h4>
</div>
<div class="panel-body">
<form role="form" name="tenantForm">
<div class="form-group row">
<label class="col-md-3 control-label required">{{"ID" | translate}}</label>
<div class="col-md-6">
<input ng-if="!isEdit" name="id" class="form-control" ng-model="tenant.id" required ng-pattern="/^[A-Za-z0-9]*$/" placeholder="{{'please input tenant id'|translate}}...." />
<span class="error" ng-messages="tenantForm.id.$touched && tenantForm.id.$error">
<span ng-message="required"> {{'tenant id is empty'|translate}}</span>
<span ng-message="pattern">{{'tenant id is invalid'|translate}} </span>
</span>
<input ng-if="isEdit" name="id" readonly class="form-control" ng-model="tenant.id" />
</div>
</div>
<div class="form-group row">
<label class="col-md-3 control-label required">{{"Name" | translate}}</label>
<div class="col-md-6">
<input name="name" class="form-control" maxlength="50" ng-model="tenant.name" required placeholder="{{'please input tenant name'|translate}}...." />
<span class="error" ng-messages="tenantForm.name.$touched && tenantForm.name.$error">
<span ng-message="required"> {{'tenant name is empty'|translate}}</span>
<span ng-message="maxlength"> {{'Name must be no more than 50 characters'|translate}}</span>
</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 control-label">{{"Description" | translate}}</label>
<div class="col-md-6">
<input name="description" class="form-control" maxlength="500" ng-model="tenant.description" placeholder="{{'please input tenant description'|translate}}...." />
</div>
</div>
<div class="form-group row">
<label class="col-md-3 control-label">{{"Description" | translate}}</label>
<div class="col-md-6">
<div style="display: flex; align-items: flex-end">
<div class="container-flex">
<div class="flex-column">
<input class="filename form-control" type="text" readonly="readonly" ng-model="selectedFile.file.name">
</div>
<div style="margin-left: 5px;width: 60px;">
<label class="btn btn-default">
<input id="logoInput" type="file" nv-file-select uploader="uploader" accept="image/*" style="visibility: collapse;height: 0px;" multiple/>
浏览
</label>
</div>
<div style="margin-left: 5px;width: 60px;" ng-if="selectedFile">
<label class="btn btn-default">
<span ng-click="removeSelectedFile()">{{'CANCEL' | translate}}</span>
</label>
</div>
</div>
</div>
<div>
<img id="img_review" ng-src="{{tenant.logo | logoFilter}}" alt="{{'Invalid icon, please upload an alternative image'|translate}}" style="height:100px" ng-if="tenant.logo && uploader.queue.length === 0" />
<div ng-thumb file="selectedFile" width="128" height="128" ng-if="selectedFile"></div>
</div>
</div>
</div>
<!--<div class="form-group row">-->
<!--<label class="col-md-3 control-label">{{"Description" | translate}}</label>-->
<!--<div class="col-md-6" style="display: flex; align-items: flex-end">-->
<!--<img id="img_review" ng-src="{{tenant.logo | logoFilter}}" alt="{{'Invalid icon, please upload an alternative image'|translate}}" style="height:100px" ng-if="tenant.logo && uploader.queue.length === 0" />-->
<!--<div ng-thumb file="selectedFile" width="128" height="128" ng-if="selectedFile"></div>-->
<!--<input class="control-label" id="logoInput" type="file" nv-file-select uploader="uploader" accept="image/*" />-->
<!--<a ng-click="removeSelectedFile()" ng-if="selectedFile">{{'CANCEL' | translate}}</a>-->
<!--</div>-->
<!--</div>--> <!--<div class="form-group row">-->
<!--<label class="col-md-3 control-label">{{"Description" | translate}}</label>-->
<!--<div class="col-md-6" style="display: flex; align-items: flex-end">-->
<!--<div class="container-flex">-->
<!--<div class="flex-column">-->
<!--<input class="filename form-control" type="text" readonly="readonly" data-ng-model="selectedFile.file.name">-->
<!--</div>-->
<!--<div style="margin-left: 5px;width: 60px;">-->
<!--<div ng-thumb file="selectedFile" width="128" height="128" ng-if="selectedFile"></div>-->
<!--<label class="btn btn-default">-->
<!--<input id="thumbnailInput" type="file" nv-file-select uploader="uploader" accept="image/*" style="visibility: collapse;height: 0px;">-->
<!--浏览-->
<!--</label>-->
<!--<a ng-click="removeSelectedFile()" ng-if="selectedFile">{{'CANCEL' | translate}}</a>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="form-group row">
<div class="col-md-offset-3 col-md-6">
<p class="help-block" style="font-size: 12px;">{{'Image in scale 200 * 54 is best' | translate}}</p>
</div>
</div>
</form>
</div>
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" ng-if="(isEdit && tenantPermissionUpdate) || (!isEdit && tenantPermissionCreate)" ng-click="submit(tenant)" ng-disabled="tenantForm.$invalid">{{'Save'|translate}}
</button>
<button type="button" class="btn btn-link" ng-click="back()">{{'Back'|translate}}</button>
</div>
</div>
</div>
/* Copyright 2016 Qianyun, Inc. All rights reserved. -- Qianyun Confidential */
/*
*
*/ 'use strict'; angular.module('yacmpApp').controller('TenantEditController', ['$scope', '$window', 'DataService', 'UtilService',
'$uibModal', '$stateParams', '$q', '$timeout', '$location', '$translate', '$filter', 'permissionService', 'commonService', 'FileUploader', function ($scope, $window, DataService, UtilService, $uibModal, $stateParams, $q, $timeout, $location, $translate,
$filter, permissionService, commonService, FileUploader) {
$scope.table_columns_user = ["User Id", "Name", "Email", "Role"]; $scope.isEdit = false;
$scope.tenant = {}; var uploader = $scope.uploader = new FileUploader({
url: UtilService.getBaseUrl() + "/icon/upload",
queueLimit: 1
}); 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;
}
}); $scope.removeSelectedFile = function(item) {
$scope.selectedFile = null;
$scope.uploader.clearQueue();
}; uploader.onAfterAddingFile = function(item) {
$scope.selectedFile = item;
$scope.$digest();
}; uploader.onWhenAddingFileFailed = function(item, filter, options) {
if (filter.name === "queueLimit") {
uploader.clearQueue(); // NOTE: the angular-file-upload has one trick bug, the item here is now is FileLikeObject but
// not File, so use input element here as a workaround.
var files = $("#logoInput")[0].files;
if (files) {
uploader.addToQueue(files[0], filter, options);
}
}
}; var id = $stateParams.id; if ($stateParams.id) {
$scope.isEdit = true;
DataService.get(CONSTANTS.SERVICE_TENANT_MGMT.PATH + "/" + id + "/with-users").success(function (tenant, status) {
$scope.tenant = tenant;
var requestParam = {};
requestParam.hierarchy = $scope.hierarchy;
requestParam.hierarchyInstanceId = $stateParams.id; }).error(function (data, status, headers, config) {
UtilService.alert($scope,"Couldn't load the tenant, error#",data);
});
} function postTenant(tenant) {
if ($scope.isEdit) {
//update tenant
DataService.put(CONSTANTS.SERVICE_TENANT_MGMT.PATH + "/" + tenant.id, tenant)
.then(function successCallback() {
UtilService.showMessage('Tenant saved', function () {
$location.path('/main/admin/tenant');
}, "SUCCESS");
}, function errorCallback(data) {
UtilService.alert($scope, "Couldn't edit tenant, error#", data);
});
} else {
//create a new tenant
DataService.post(CONSTANTS.SERVICE_TENANT_MGMT.PATH, tenant)
.then(function successCallback() {
UtilService.showMessage('Tenant created', function () {
$location.path('/main/admin/tenant');
}, "SUCCESS");
}, function errorCallback(data) {
UtilService.alert($scope,"Couldn't create tenant, error#",data);
});
}
} $scope.submit = function (tenant) {
if (uploader.queue.length > 0) {
uploader.uploadAll();
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem, response:', response);
tenant.logo = response;
postTenant(tenant);
};
} else {
postTenant(tenant);
} }; $scope.back = function() {
$location.path('/main/admin/tenant');
}; permissionService.tenantPermission.update.then(
function(permission) {
$scope.tenantPermissionUpdate = permission;
}, function(reject) {
$scope.tenantPermissionUpdate = false;
}
); permissionService.tenantPermission.create.then(
function(permission) {
$scope.tenantPermissionCreate = permission;
}, function(reject) {
$scope.tenantPermissionCreate = false;
}
);
}
]
);
angular-file-upload的更多相关文章
- angularjs file upload插件使用总结
之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...
- Angular2 File Upload
Angular2 File Upload Install Install the components npm install ng2-file-upload --save github: https ...
- [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor
The upload class will be used in the service layer. Notice it has a constructor for file attribute, ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- jQuery File Upload done函数没有返回
最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...
- kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸
- 【转发】Html5 File Upload with Progress
Html5 File Upload with Progress Posted by Shiv Kumar on 25th September, 2010Senior Sof ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jquery file upload 文件上传插件
1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...
- jQuery File Upload跨域上传
最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...
随机推荐
- Hive三种不同的数据导出的方式
转自:http://blog.chinaunix.net/uid-27177626-id-4653808.html Hive三种不同的数据导出的方式,根据导出的地方不一样,将这些方法分为三类:(1)导 ...
- JQuery------鼠标双击时,不选中div里面的文字
如图:(去掉选中文字的蓝色背景色) 代码: //方法一:<div class="test" onselectstart="return false" &g ...
- 打开cmd闪退
我们在使用电脑过程中一般会很少用到cmd命令,CMD命令窗口在一些特殊情况时我们会用到,如PING下看网络通不通.在CMD窗口里运行命令如磁盘格式转换,但是有些朋友遇到了这样的问题,在开始运行输入CM ...
- Oracle数据库列出所有表名SQL语句
select table_name from user_tables
- 如何用Project2010制作WBS
如何用Project2010制作WBS: http://www.projectup.net/blog/index.php?option=com_content&view=article& ...
- 第一次广搜!HDU1548--A Strange Lift
一上来看见题目就用了深搜(因为只会深搜)果断内存超限(据说时间也会超限)无奈只好开始用广搜 其实广搜的思路和深搜有很多类似的地方 不过实现的过程中用到了队列 因此有点难以理解(好吧我个人认为) 这题是 ...
- 1853: [Scoi2010]幸运数字[容斥原理]
1853: [Scoi2010]幸运数字 Time Limit: 2 Sec Memory Limit: 64 MBSubmit: 2405 Solved: 887[Submit][Status] ...
- Struts 入门(一) 搭建Struts环境
eclipse中创建项目 搭建步骤: 1.创建web项目 2.下载导入相关jar包 3.创建并完善相关配置文件 4.创建(控制器)Action 并测试启动 1.文件--新建--动态web项目 给项目起 ...
- js 匿名函数-立即调用的函数表达式
先提个问题, 单独写匿名函数为什么报错?return 匿名函数 为什么不报错? 如图: 第二种情况在 f 还没有执行的时候,就报错了,,,当然这得归因于函数声明语句声明提前(发生在代码执行之前)的原因 ...
- CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器
CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...