add.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增文创品牌')" />
  5. </head>
  6. <body class="white-bg">
  7. <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  8. <form class="form-horizontal m" id="form-ipInfo-add">
  9. <div class="col-xs-12">
  10. <div class="form-group">
  11. <label class="col-sm-3 control-label">文创品牌名称:</label>
  12. <div class="col-sm-8">
  13. <input name="ipName" class="form-control" type="text">
  14. </div>
  15. </div>
  16. </div>
  17. <div class="col-xs-12">
  18. <div class="form-group">
  19. <label class="col-sm-3 control-label">文创图片:</label>
  20. <div class="col-sm-8">
  21. <img id="ipUrlImg" width="30%" height="30%">
  22. <input type="file" class="form-control" name="ipInfoUrl" id="ipInfoUrl" accept="image/*"/>
  23. <input type="hidden" class="form-control" name="ipUrl" id="ipUrl" />
  24. </div>
  25. </div>
  26. </div>
  27. <!-- <div class="col-xs-12">-->
  28. <!-- <div class="form-group">-->
  29. <!-- <label class="col-sm-3 control-label">色号:</label>-->
  30. <!-- <div class="col-sm-8">-->
  31. <!-- <input name="colorNo" class="form-control" type="text">-->
  32. <!-- </div>-->
  33. <!-- </div>-->
  34. <!-- </div>-->
  35. <!-- <div class="col-xs-12">-->
  36. <!-- <div class="form-group">-->
  37. <!-- <label class="col-sm-3 control-label">显示顺序:</label>-->
  38. <!-- <div class="col-sm-8">-->
  39. <!-- <input name="sort" class="form-control" type="text">-->
  40. <!-- </div>-->
  41. <!-- </div>-->
  42. <!-- </div>-->
  43. </form>
  44. </div>
  45. <th:block th:include="include :: footer" />
  46. <script th:inline="javascript">
  47. var prefix = ctx + "master/ipInfo"
  48. $('#ipInfoUrl').change(function () {
  49. var fileSize = this.files[0].size;
  50. fileSize = Math.round(fileSize/1024*100)/100;
  51. if(fileSize>2048){
  52. layer.msg('上传文件不得大于2M,请重新上传。', {time: 3000, icon:6});
  53. return false;
  54. }
  55. if (!/image\/\w+/.test(this.files[0].type)) {
  56. layer.msg('上传的不是图片文件,请重新上传。', {time: 3000, icon:6});
  57. return false;
  58. }
  59. if ($(this).val()) {
  60. var formdata = new FormData();
  61. formdata.append("imageFile", this.files[0]);
  62. $.ajax({
  63. url: ctx + "common/upload/file/image",
  64. data: formdata,
  65. type: "post",
  66. processData: false,
  67. contentType: false,
  68. beforeSend: function () {
  69. $.modal.loading("正在处理中,请稍后...");
  70. $.modal.disable();
  71. },
  72. success: function (result) {
  73. if (result.code === web_status.SUCCESS) {
  74. $('#ipUrlImg').attr('src', result.imageUrl);
  75. $('#ipUrl').val(result.imageUrl);
  76. $.modal.alertSuccess(result.msg)
  77. } else if (result.code === web_status.WARNING) {
  78. $.modal.alertWarning(result.msg)
  79. } else {
  80. $.modal.alertError(result.msg);
  81. }
  82. $.modal.closeLoading();
  83. $.modal.enable();
  84. }
  85. })
  86. }
  87. });
  88. $("#form-ipInfo-add").validate({
  89. rules: {
  90. ipName: {
  91. required: true
  92. },
  93. // colorNo: {
  94. // required: true,
  95. // digits: true
  96. // },
  97. sort: {
  98. required: true,
  99. digits: true
  100. }
  101. },
  102. messages: {
  103. ipName: icon + "请输入文创品牌名称",
  104. // colorNo: {
  105. // required: icon + "请输入使用的色号"
  106. // },
  107. sort: {
  108. required: icon + "请输入排序号"
  109. }
  110. },
  111. focusCleanup: true
  112. });
  113. function submitHandler() {
  114. if ($.validate.form()) {
  115. if ($("#ipUrl").val() === "") {
  116. $.modal.alertError("请上传文创的简介图片");
  117. return;
  118. }
  119. $.operate.save(prefix + "/add", $('#form-ipInfo-add').serialize());
  120. }
  121. }
  122. </script>
  123. </body>
  124. </html>