add.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增banner')" />
  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-banner-add">
  9. <div class="col-xs-12">
  10. <div class="form-group">
  11. <label class="col-sm-3 control-label">banner图地址:</label>
  12. <div class="col-sm-8">
  13. <img id="bannerImg" width="30%" height="30%">
  14. <input type="file" class="form-control" id="bannerImgUrl" accept="image/*"/>
  15. <input type="hidden" lass="form-control" name="bannerUrl" id="bannerUrl" />
  16. </div>
  17. </div>
  18. </div>
  19. <!-- <div class="col-xs-12">-->
  20. <!-- <div class="form-group">-->
  21. <!-- <label class="col-sm-3 control-label">商品ID:</label>-->
  22. <!-- <div class="col-sm-8">-->
  23. <!-- <input name="prodId" class="form-control" type="text">-->
  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">新闻ID:</label>-->
  30. <!-- <div class="col-sm-8">-->
  31. <!-- <input name="newsId" 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 + "business/banner"
  48. $('#bannerImgUrl').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. $('#bannerImg').attr('src', result.imageUrl);
  75. $('#bannerUrl').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-banner-add").validate({
  89. focusCleanup: true
  90. });
  91. function submitHandler() {
  92. if ($.validate.form()) {
  93. $.operate.save(prefix + "/add", $('#form-banner-add').serialize());
  94. }
  95. }
  96. </script>
  97. </body>
  98. </html>