From 3c3f234360c4450d700609a94900c1249a9fff1d Mon Sep 17 00:00:00 2001
From: shuzheng <469741414@qq.com>
Date: Tue, 16 May 2017 10:59:33 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=8F=E6=9C=BA=E6=96=87=E4=BB=B6=E5=90=8D?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zheng-ui/zheng-oss-web/aliyun/upload.html | 47 +++++++++++++++++++++--
 1 file changed, 43 insertions(+), 4 deletions(-)
diff --git a/zheng-ui/zheng-oss-web/aliyun/upload.html b/zheng-ui/zheng-oss-web/aliyun/upload.html
index 4a5d0f32..9d542946 100644
--- a/zheng-ui/zheng-oss-web/aliyun/upload.html
+++ b/zheng-ui/zheng-oss-web/aliyun/upload.html
@@ -5,15 +5,54 @@
 <title>zheng-oss-web AliyunOSS demo</title>
 </head>
 <body>
-<form action="" th:action="${policy.action}" method="post" enctype="multipart/form-data">
-<p>key : <input type="text" name="key" th:value="${policy.dir + '/${filename}'}"/></p>
+<input id="dir" type="hidden" name="dir" th:value="${policy.dir}"/>
+<form id="form" th:action="${policy.action}" method="post" enctype="multipart/form-data">
+<p>key : <input id="key" type="text" name="key"/></p>
 <p>policy : <input type="text" name="policy" th:value="${policy.policy}"/></p>
 <p>OSSAccessKeyId : <input type="text" name="OSSAccessKeyId" th:value="${policy.OSSAccessKeyId}"/></p>
 <p>success_action_status : <input type="text" name="success_action_status" value="200"/></p>
 <p>callback : <input type="text" name="callback" th:value="${policy.callback}"/></p>
 <p>signature : <input type="text" name="signature" th:value="${policy.signature}"/></p>
-<p>file : <input type="file" name="file"/></p>
-<p><input type="submit" value="上传"/></p>
+<p>file : <input id="file" type="file" name="file"/></p>
+<p><input id="submit" type="submit" value="上传"/></p>
 </form>
+
+<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
+<script>
+$(function() {
+	// 选择文件后，随机文件名
+	$('#file').change(function() {
+		var suffix = get_suffix($(this).val());
+		var random_name = random_string();
+		$('#key').val($('#dir').val() + '/' + random_name + suffix);
+	});
+	// 提交校验
+	$('#form').submit(function() {
+		if ($('#key').val() == '') {
+			return false;
+		}
+	});
+});
+// 根据路径获取后缀
+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;
+}
+</script>
 </body>
 </html>
\ No newline at end of file
