add.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增首页轮播')" />
  5. <th:block th:include="include :: bootstrap-fileinput-css"/>
  6. </head>
  7. <body class="white-bg">
  8. <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  9. <form class="form-horizontal m" id="form-pictures-add">
  10. <div class="form-group">
  11. <label class="col-sm-3 control-label is-required">标题:</label>
  12. <div class="col-sm-8">
  13. <input name="title" class="form-control" type="text" required>
  14. </div>
  15. </div>
  16. <div class="form-group">
  17. <label class="col-sm-3 control-label is-required">来源:</label>
  18. <div class="col-sm-8">
  19. <input name="laiyuan" class="form-control" type="text" required>
  20. </div>
  21. </div>
  22. <div class="form-group">
  23. <label class="col-sm-3 control-label">内容:</label>
  24. <div class="col-sm-8">
  25. <textarea name="content" class="form-control" required></textarea>
  26. </div>
  27. </div>
  28. <div class="form-group">
  29. <label class="col-sm-3 control-label">图片:</label>
  30. <div class="col-sm-8">
  31. <input type="hidden" name="pictures">
  32. <div class="file-loading">
  33. <input class="form-control file-upload" id="pictures" name="file" type="file">
  34. </div>
  35. </div>
  36. </div>
  37. </form>
  38. </div>
  39. <th:block th:include="include :: footer" />
  40. <th:block th:include="include :: bootstrap-fileinput-js"/>
  41. <script th:inline="javascript">
  42. var prefix = ctx + "mobile/pictures"
  43. $("#form-pictures-add").validate({
  44. focusCleanup: true
  45. });
  46. function submitHandler() {
  47. if ($.validate.form()) {
  48. $("input[name='pictures']").val(fileP);
  49. $.operate.save(prefix + "/add", $('#form-pictures-add').serialize());
  50. }
  51. }
  52. let fileP="";//附件用
  53. $(".file-upload").fileinput({
  54. uploadUrl: ctx+'/common/upload',
  55. maxFileCount: 1,
  56. autoReplace: true,
  57. allowedFileExtensions: ['jpg','png']
  58. }).on('fileuploaded', function (event, data, previewId, index) {
  59. $("input[name='" + event.currentTarget.id + "']").val(data.response.url);
  60. fileP = data.response.fileName;
  61. }).on('fileremoved', function (event, id, index) {
  62. $("input[name='" + event.currentTarget.id + "']").val('')
  63. }).on('change', function (event, data, previewId, index) {
  64. $(".file-preview-thumbnails").find('.file-preview-frame').remove();
  65. })
  66. </script>
  67. </body>
  68. </html>