OnlyOffice在线文档

index.html 1.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
  3. <head th:replace="/_fragments :: head(~{::title})">
  4. <meta charset="UTF-8">
  5. <title>文件管理</title>
  6. <link href="../static/layui/css/layui.css" rel="stylesheet"/>
  7. <script src="../static/layui/layui.js" type="text/javascript"></script>
  8. <script type="text/javascript" src="../static/js/style.js"></script>
  9. </head>
  10. <body>
  11. <div style="padding: 10px">
  12. <div class="layui-upload" >
  13. <button type="button" class="layui-btn demo-class-accept" lay-options="{accept: 'file'}">
  14. <i class="layui-icon layui-icon-upload"></i>
  15. 上传文件
  16. </button>
  17. </div>
  18. </div>
  19. <div class="layui-card">
  20. <div class="layui-card-header"></div>
  21. <div class="layui-card-body">
  22. <p>不要以127.0.0.1或者localhost访问demo。</p>
  23. <p>demo提供了在线编辑,转换的示例。只要是onlyoffice支持的类型</p>
  24. <p>demo中正文和历史文件都放在了一起,具体使用时按自己的业务进行区分,分表或加字段进行区分。</p>
  25. </div>
  26. </div>
  27. <div>
  28. </div>
  29. <table class="layui-hide" id="fileTable" lay-skin="line" lay-even lay-filter="fileTable"></table>
  30. <script th:inline="javascript">
  31. // var meId = /*[[${meId}]]*/ 'Sebastian';
  32. $(function () {
  33. upload.render({
  34. elem: '.demo-class-accept', // 绑定多个元素
  35. url: '/files/upload', // 此处配置你自己的上传接口即可
  36. accept: 'file', // 普通文件
  37. done: function(res){
  38. layer.msg(res.message,function (){
  39. fileTable.reload("fileTable");
  40. })
  41. },
  42. error:function (){
  43. layer.msg("上传失败")
  44. }
  45. });
  46. })
  47. </script>
  48. </body>
  49. </html>