upload.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <title>zheng-oss-web AliyunOSS demo</title>
  6. </head>
  7. <body>
  8. <input id="dir" type="hidden" name="dir" th:value="${policy.dir}"/>
  9. <form id="form" th:action="${policy.action}" method="post" enctype="multipart/form-data">
  10. <p>key : <input id="key" type="text" name="key"/></p>
  11. <p>policy : <input type="text" name="policy" th:value="${policy.policy}"/></p>
  12. <p>OSSAccessKeyId : <input type="text" name="OSSAccessKeyId" th:value="${policy.OSSAccessKeyId}"/></p>
  13. <p>success_action_status : <input type="text" name="success_action_status" value="200"/></p>
  14. <p>callback : <input type="text" name="callback" th:value="${policy.callback}"/></p>
  15. <p>signature : <input type="text" name="signature" th:value="${policy.signature}"/></p>
  16. <p>file : <input id="file" type="file" name="file"/></p>
  17. <p><input id="submit" type="submit" value="上传"/></p>
  18. </form>
  19. <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  20. <script>
  21. $(function() {
  22. // 选择文件后,随机文件名
  23. $('#file').change(function() {
  24. var suffix = get_suffix($(this).val());
  25. var random_name = random_string();
  26. $('#key').val($('#dir').val() + '/' + random_name + suffix);
  27. });
  28. // 提交校验
  29. $('#form').submit(function() {
  30. if ($('#key').val() == '') {
  31. return false;
  32. }
  33. });
  34. });
  35. // 根据路径获取后缀
  36. function get_suffix(filename) {
  37. var pos = filename.lastIndexOf('.');
  38. var suffix = '';
  39. if (pos != -1) {
  40. suffix = filename.substring(pos);
  41. }
  42. return suffix;
  43. }
  44. // 随机字符串
  45. function random_string(len) {
  46. len = len || 32;
  47. var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  48. var maxPos = chars.length;
  49. var pwd = '';
  50. for (i = 0; i < len; i++) {
  51. pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  52. }
  53. return pwd;
  54. }
  55. </script>
  56. </body>
  57. </html>