zheng-upms使用zheng-oss上传图片

zheng-upms/zheng-upms-server/src/main/java/com/zheng/upms/server/interceptor/UpmsInterceptor.java

@@ -1,5 +1,6 @@
 package com.zheng.upms.server.interceptor;
 
+import com.zheng.common.util.PropertiesFileUtil;
 import com.zheng.upms.dao.model.UpmsUser;
 import com.zheng.upms.rpc.api.UpmsApiService;
 import com.zheng.upms.server.controller.manage.UpmsOrganizationController;
@@ -21,12 +22,14 @@ import javax.servlet.http.HttpServletResponse;
 public class UpmsInterceptor extends HandlerInterceptorAdapter {
 
     private static Logger _log = LoggerFactory.getLogger(UpmsInterceptor.class);
+    private static final String ZHENG_OSS_ALIYUN_OSS_POLICY = PropertiesFileUtil.getInstance("zheng-oss-client").get("aliyun.oss.policy");
 
     @Autowired
     UpmsApiService upmsApiService;
 
     @Override
     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
+        request.setAttribute("ZHENG_OSS_ALIYUN_OSS_POLICY", ZHENG_OSS_ALIYUN_OSS_POLICY);
         // 过滤ajax
         if (null != request.getHeader("X-Requested-With") && request.getHeader("X-Requested-With").equalsIgnoreCase("XMLHttpRequest")) {
             return true;

zheng-upms/zheng-upms-server/src/main/webapp/WEB-INF/jsp/manage/system/create.jsp

@@ -9,7 +9,7 @@
 <div id="createDialog" class="crudDialog">
 	<form id="createForm" method="post">
 		<div class="form-group">
-			<label for="theme">主题</label>
+			<label for="theme"></label>
 			<input id="theme" type="color" class="form-control" name="theme" maxlength="50">
 		</div>
 		<div class="form-group">
@@ -18,15 +18,20 @@
 		</div>
 		<div class="form-group">
 			<label for="title">标题</label>
-			<input id="title" type="text" class="form-control" name="title" maxlength="20">
+			<input id="title" type="text" class="form-control" name="title" maxlength="20" required="true">
 		</div>
 		<div class="form-group">
 			<label for="name">名称</label>
-			<input id="name" type="text" class="form-control" name="name" maxlength="20">
+			<input id="name" type="text" class="form-control" name="name" maxlength="20" required="true">
 		</div>
-		<div class="form-group">
-			<label for="banner">背景图</label>
-			<input id="banner" type="text" class="form-control" name="banner" maxlength="50">
+		<div class="row">
+			<div class="col-lg-8 form-group">
+				<label for="name">背景图</label>
+				<input id="banner" type="text" class="form-control" name="banner" maxlength="150">
+			</div>
+			<div class="col-lg-4">
+				<div id="picker">上传背景图</div>
+			</div>
 		</div>
 		<div class="form-group">
 			<label for="description">描述</label>
@@ -53,6 +58,80 @@
 	</form>
 </div>
 <script>
+function initUploader() {
+    //百度上传按钮
+    var uploader = WebUploader.create({
+        // swf文件路径
+        swf: '${basePath}/resources/zheng-admin/plugins/webuploader-0.1.5/Uploader.swf',
+        // 文件接收服务端
+        method: 'POST',
+        // 选择文件的按钮。可选。
+        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
+        pick: {
+            "id": '#picker',
+            "multiple": false
+        },
+        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
+        resize: false,
+        // 选完文件后，是否自动上传。
+        auto: false,
+        // 只允许选择图片文件
+        accept: {
+            title: '图片文件',
+            extensions: 'gif,jpg,jpeg,bmp,png',
+            mimeTypes: 'image/*'
+        }
+    });
+    uploader.on( 'fileQueued', function(file) {
+        $.ajax({
+            url: '${ZHENG_OSS_ALIYUN_OSS_POLICY}',
+            type: 'GET',
+            dataType: 'jsonp',
+            jsonp: 'callback',
+            success: function(result) {
+                var suffix = get_suffix(file.name);
+                var random_name = random_string();
+                uploader.options.formData.key = result.dir + '/' + random_name + suffix;
+                uploader.options.formData.policy = result.policy;
+                uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
+                uploader.options.formData.success_action_status = 200;
+                uploader.options.formData.callback = result.callback;
+                uploader.options.formData.signature = result.signature;
+                uploader.options.server = result.action;
+                uploader.upload();
+            },
+            error: function(msg) {
+                console.log(msg);
+            }
+        });
+    });
+    uploader.on( 'uploadSuccess', function(file, response) {
+        $('#banner').val(response.data.filename).focus();
+    });
+    uploader.on( 'uploadError', function(file) {
+        console.log('uploadError', file);
+    });
+}
+// 根据路径获取后缀
+function get_suffix(filename) {
+    var pos = filename.lastIndexOf('.');
+    var suffix = '';
+    if (pos != -1) {
+        suffix = filename.substring(pos);
+    }
+    return suffix;
+}
+// 随机字符串
+function random_string(len) {
+    len = len || 32;
+    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    var maxPos = chars.length;
+    var pwd = '';
+    for (i = 0; i < len; i++) {
+        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+    }
+    return pwd;
+}
 function createSubmit() {
     $.ajax({
         type: 'post',

zheng-upms/zheng-upms-server/src/main/webapp/WEB-INF/jsp/manage/system/index.jsp

@@ -90,6 +90,7 @@ function createAction() {
 		content: 'url:${basePath}/manage/system/create',
 		onContentReady: function () {
 			initMaterialInput();
+			initUploader();
 		}
 	});
 }
@@ -117,6 +118,7 @@ function updateAction() {
 			content: 'url:${basePath}/manage/system/update/' + rows[0].systemId,
 			onContentReady: function () {
 				initMaterialInput();
+				initUploader();
 			}
 		});
 	}

zheng-upms/zheng-upms-server/src/main/webapp/WEB-INF/jsp/manage/system/update.jsp

@@ -18,15 +18,20 @@
 		</div>
 		<div class="form-group">
 			<label for="title">标题</label>
-			<input id="title" type="text" class="form-control" name="title" maxlength="20" value="${system.title}">
+			<input id="title" type="text" class="form-control" name="title" maxlength="20" value="${system.title}" required="true">
 		</div>
 		<div class="form-group">
 			<label for="name">名称</label>
-			<input id="name" type="text" class="form-control" name="name" maxlength="20" value="${system.name}">
+			<input id="name" type="text" class="form-control" name="name" maxlength="20" value="${system.name}" required="true">
 		</div>
-		<div class="form-group">
-			<label for="banner">背景图</label>
-			<input id="banner" type="text" class="form-control" name="banner" maxlength="50" value="${system.banner}">
+		<div class="row">
+			<div class="col-lg-8 form-group">
+				<label for="name">背景图</label>
+				<input id="banner" type="text" class="form-control" name="banner" maxlength="150" value="${system.banner}">
+			</div>
+			<div class="col-lg-4">
+				<div id="picker">上传背景图</div>
+			</div>
 		</div>
 		<div class="form-group">
 			<label for="description">描述</label>
@@ -53,6 +58,80 @@
 	</form>
 </div>
 <script>
+    function initUploader() {
+        //百度上传按钮
+        var uploader = WebUploader.create({
+            // swf文件路径
+            swf: '${basePath}/resources/zheng-admin/plugins/webuploader-0.1.5/Uploader.swf',
+            // 文件接收服务端
+            method: 'POST',
+            // 选择文件的按钮。可选。
+            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
+            pick: {
+                "id": '#picker',
+                "multiple": false
+            },
+            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
+            resize: false,
+            // 选完文件后，是否自动上传。
+            auto: false,
+            // 只允许选择图片文件
+            accept: {
+                title: '图片文件',
+                extensions: 'gif,jpg,jpeg,bmp,png',
+                mimeTypes: 'image/*'
+            }
+        });
+        uploader.on( 'fileQueued', function(file) {
+            $.ajax({
+                url: '${ZHENG_OSS_ALIYUN_OSS_POLICY}',
+                type: 'GET',
+                dataType: 'jsonp',
+                jsonp: 'callback',
+                success: function(result) {
+                    var suffix = get_suffix(file.name);
+                    var random_name = random_string();
+                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
+                    uploader.options.formData.policy = result.policy;
+                    uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
+                    uploader.options.formData.success_action_status = 200;
+                    uploader.options.formData.callback = result.callback;
+                    uploader.options.formData.signature = result.signature;
+                    uploader.options.server = result.action;
+                    uploader.upload();
+                },
+                error: function(msg) {
+                    console.log(msg);
+                }
+            });
+        });
+        uploader.on( 'uploadSuccess', function(file, response) {
+            $('#banner').val(response.data.filename).focus();
+        });
+        uploader.on( 'uploadError', function(file) {
+            console.log('uploadError', file);
+        });
+    }
+    // 根据路径获取后缀
+    function get_suffix(filename) {
+        var pos = filename.lastIndexOf('.');
+        var suffix = '';
+        if (pos != -1) {
+            suffix = filename.substring(pos);
+        }
+        return suffix;
+    }
+    // 随机字符串
+    function random_string(len) {
+        len = len || 32;
+        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        var maxPos = chars.length;
+        var pwd = '';
+        for (i = 0; i < len; i++) {
+            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+        }
+        return pwd;
+    }
 function createSubmit() {
     $.ajax({
         type: 'post',

zheng-upms/zheng-upms-server/src/main/webapp/WEB-INF/jsp/manage/user/create.jsp

@@ -20,9 +20,14 @@
 			<label for="realname">姓名</label>
 			<input id="realname" type="text" class="form-control" name="realname" maxlength="20">
 		</div>
-		<div class="form-group">
-			<label for="avatar">头像</label>
-			<input id="avatar" type="text" class="form-control" name="avatar" maxlength="50">
+		<div class="row">
+			<div class="col-lg-8 form-group">
+				<label for="avatar">头像</label>
+				<input id="avatar" type="text" class="form-control" name="avatar" maxlength="150">
+			</div>
+			<div class="col-lg-4">
+				<div id="picker">上传头像</div>
+			</div>
 		</div>
 		<div class="form-group">
 			<label for="phone">电话</label>
@@ -57,6 +62,80 @@
 	</form>
 </div>
 <script>
+function initUploader() {
+	//百度上传按钮
+	var uploader = WebUploader.create({
+		// swf文件路径
+		swf: '${basePath}/resources/zheng-admin/plugins/webuploader-0.1.5/Uploader.swf',
+		// 文件接收服务端
+		method: 'POST',
+		// 选择文件的按钮。可选。
+		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
+		pick: {
+			"id": '#picker',
+			"multiple": false
+		},
+		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
+		resize: false,
+		// 选完文件后，是否自动上传。
+		auto: false,
+		// 只允许选择图片文件
+		accept: {
+			title: '图片文件',
+			extensions: 'gif,jpg,jpeg,bmp,png',
+			mimeTypes: 'image/*'
+		}
+	});
+	uploader.on( 'fileQueued', function(file) {
+		$.ajax({
+			url: '${ZHENG_OSS_ALIYUN_OSS_POLICY}',
+			type: 'GET',
+			dataType: 'jsonp',
+			jsonp: 'callback',
+			success: function(result) {
+				var suffix = get_suffix(file.name);
+				var random_name = random_string();
+				uploader.options.formData.key = result.dir + '/' + random_name + suffix;
+				uploader.options.formData.policy = result.policy;
+				uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
+				uploader.options.formData.success_action_status = 200;
+				uploader.options.formData.callback = result.callback;
+				uploader.options.formData.signature = result.signature;
+				uploader.options.server = result.action;
+				uploader.upload();
+			},
+			error: function(msg) {
+				console.log(msg);
+			}
+		});
+	});
+	uploader.on( 'uploadSuccess', function(file, response) {
+		$('#avatar').val(response.data.filename).focus();
+	});
+	uploader.on( 'uploadError', function(file) {
+		console.log('uploadError', file);
+	});
+}
+// 根据路径获取后缀
+function get_suffix(filename) {
+	var pos = filename.lastIndexOf('.');
+	var suffix = '';
+	if (pos != -1) {
+		suffix = filename.substring(pos);
+	}
+	return suffix;
+}
+// 随机字符串
+function random_string(len) {
+	len = len || 32;
+	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	var maxPos = chars.length;
+	var pwd = '';
+	for (i = 0; i < len; i++) {
+		pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+	}
+	return pwd;
+}
 function createSubmit() {
     $.ajax({
         type: 'post',

zheng-upms/zheng-upms-server/src/main/webapp/WEB-INF/jsp/manage/user/index.jsp

@@ -105,6 +105,7 @@ function createAction() {
 		content: 'url:${basePath}/manage/user/create',
 		onContentReady: function () {
 			initMaterialInput();
+            initUploader();
 		}
 	});
 }
@@ -132,6 +133,7 @@ function updateAction() {
 			content: 'url:${basePath}/manage/user/update/' + rows[0].userId,
 			onContentReady: function () {
 				initMaterialInput();
+                initUploader();
 			}
 		});
 	}

zheng-upms/zheng-upms-server/src/main/webapp/WEB-INF/jsp/manage/user/update.jsp

@@ -16,9 +16,14 @@
 			<label for="realname">姓名</label>
 			<input id="realname" type="text" class="form-control" name="realname" maxlength="20" value="${user.realname}">
 		</div>
-		<div class="form-group">
-			<label for="avatar">头像</label>
-			<input id="avatar" type="text" class="form-control" name="avatar" maxlength="50" value="${user.avatar}">
+		<div class="row">
+			<div class="col-lg-8 form-group">
+				<label for="avatar">头像</label>
+				<input id="avatar" type="text" class="form-control" name="avatar" maxlength="150" value="${user.avatar}">
+			</div>
+			<div class="col-lg-4">
+				<div id="picker">上传头像</div>
+			</div>
 		</div>
 		<div class="form-group">
 			<label for="phone">电话</label>
@@ -53,6 +58,80 @@
 	</form>
 </div>
 <script>
+function initUploader() {
+	//百度上传按钮
+	var uploader = WebUploader.create({
+		// swf文件路径
+		swf: '${basePath}/resources/zheng-admin/plugins/webuploader-0.1.5/Uploader.swf',
+		// 文件接收服务端
+		method: 'POST',
+		// 选择文件的按钮。可选。
+		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
+		pick: {
+			"id": '#picker',
+			"multiple": false
+		},
+		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
+		resize: false,
+		// 选完文件后，是否自动上传。
+		auto: false,
+		// 只允许选择图片文件
+		accept: {
+			title: '图片文件',
+			extensions: 'gif,jpg,jpeg,bmp,png',
+			mimeTypes: 'image/*'
+		}
+	});
+	uploader.on( 'fileQueued', function(file) {
+		$.ajax({
+			url: '${ZHENG_OSS_ALIYUN_OSS_POLICY}',
+			type: 'GET',
+			dataType: 'jsonp',
+			jsonp: 'callback',
+			success: function(result) {
+				var suffix = get_suffix(file.name);
+				var random_name = random_string();
+				uploader.options.formData.key = result.dir + '/' + random_name + suffix;
+				uploader.options.formData.policy = result.policy;
+				uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
+				uploader.options.formData.success_action_status = 200;
+				uploader.options.formData.callback = result.callback;
+				uploader.options.formData.signature = result.signature;
+				uploader.options.server = result.action;
+				uploader.upload();
+			},
+			error: function(msg) {
+				console.log(msg);
+			}
+		});
+	});
+	uploader.on( 'uploadSuccess', function(file, response) {
+		$('#avatar').val(response.data.filename).focus();
+	});
+	uploader.on( 'uploadError', function(file) {
+		console.log('uploadError', file);
+	});
+}
+// 根据路径获取后缀
+function get_suffix(filename) {
+	var pos = filename.lastIndexOf('.');
+	var suffix = '';
+	if (pos != -1) {
+		suffix = filename.substring(pos);
+	}
+	return suffix;
+}
+// 随机字符串
+function random_string(len) {
+	len = len || 32;
+	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	var maxPos = chars.length;
+	var pwd = '';
+	for (i = 0; i < len; i++) {
+		pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+	}
+	return pwd;
+}
 function createSubmit() {
     $.ajax({
         type: 'post',

zheng-upms/zheng-upms-server/src/main/webapp/resources/inc/footer.jsp

@@ -15,4 +15,5 @@
 <script src="${basePath}/resources/zheng-admin/plugins/jquery-confirm/jquery-confirm.min.js"></script>
 <script src="${basePath}/resources/zheng-admin/plugins/select2/js/select2.min.js"></script>
 <script src="${basePath}/resources/zheng-admin/plugins/zTree_v3/js/jquery.ztree.all.min.js"></script>
+<script src="${basePath}/resources/zheng-admin/plugins/webuploader-0.1.5/webuploader.min.js"></script>
 <script src="${basePath}/resources/zheng-admin/js/common.js"></script>

zheng-upms/zheng-upms-server/src/main/webapp/resources/inc/head.jsp

@@ -16,4 +16,5 @@
 <link href="${basePath}/resources/zheng-admin/plugins/select2/css/select2.min.css" rel="stylesheet"/>
 <link href="${basePath}/resources/zheng-admin/plugins/select2/theme/select2-bootstrap.min.css" rel="stylesheet"/>
 <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
+<link href="${basePath}/resources/zheng-admin/plugins/webuploader-0.1.5/webuploader.css" rel="stylesheet"/>
 <link href="${basePath}/resources/zheng-admin/css/common.css" rel="stylesheet"/>