style_test_add.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. {extend name="public/layout" /} {block name="title"}风格测一测图片{/block} {block name="body"}
  2. <style type="text/css">
  3. html{
  4. background: #fff;
  5. }
  6. </style>
  7. <body>
  8. <form class="layui-form" id="admin" enctype="multipart/form-data">
  9. <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
  10. <div class="layui-form-item">
  11. <label class="layui-form-label">封面图</label>
  12. <div class="layui-input-inline" id="upload-drag">
  13. <div class="layui-upload-drag">
  14. <i class="layui-icon">&#xe681;</i>
  15. <p>点击或拖拽到此处</p>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="layui-form-item">
  20. <label class="layui-form-label"></label>
  21. <div><i style="color: red;margin-right: 5px;">*</i>建议上传封面图宽高比例3:5,图片大小不超过1M</div>
  22. </div>
  23. <div class="layui-form-item">
  24. <label class="layui-form-label">风格</label>
  25. <div class="layui-input-inline">
  26. <select name="type">
  27. {volist name="type" id="v" key="k"}
  28. <option value="{$k}">{$v}</option>
  29. {/volist}
  30. </select>
  31. </div>
  32. </div>
  33. <div class="layui-form-item layui-hide">
  34. <input type="button" lay-submit lay-filter="styleimg-submit" id="styleimg-submit" value="确认添加">
  35. <input type="button" lay-submit lay-filter="styleimg-edit" id="styleimg-edit" value="确认编辑">
  36. </div>
  37. </div>
  38. </form>
  39. </body>
  40. {/block} {block name="js"}
  41. <script>
  42. layui.config({
  43. base: '__LAYUI__/',
  44. urlbase: '/sys'
  45. }).extend({
  46. index: 'lib/index' //主入口模块
  47. }).use(['index', 'form','upload','layedit'], function() {
  48. var form = layui.form,
  49. upload = layui.upload,
  50. layedit = layui.layedit,
  51. $ = layui.jquery,
  52. loadingIndex = 0,
  53. loading = false;
  54. form.render();
  55. /* 监听提交 */
  56. form.on('submit(styleimg-submit)', function(obj) {
  57. var index = parent.layer.getFrameIndex(window.name);
  58. var formData = new FormData(obj.form);
  59. loadingIndex = layer.load('Loading...', {
  60. shade: [0.6,'#000'] //0.1透明度的白色背景
  61. });
  62. if (loading) {
  63. return false;
  64. }
  65. loading = true;
  66. $.ajax({
  67. url:'{:url("tool/styleTestAddSave")}',
  68. type: 'post',
  69. data: formData,
  70. dataType: 'json',
  71. processData: false,
  72. contentType: false,
  73. success: function (res) {
  74. if (res.code === 0) {
  75. layer.msg(res.msg, {anim: 0}, function () {
  76. loading = false;
  77. layer.close(loadingIndex);
  78. parent.layui.table.reload('style-test-table'); //重载表格
  79. parent.layer.close(index); //再执行关闭
  80. });
  81. } else {
  82. layer.msg(res.msg, {anim: 6});
  83. }
  84. }
  85. });
  86. return false;
  87. });
  88. //拖拽上传
  89. upload.render({
  90. elem: '#upload-drag',
  91. accept: 'image',
  92. exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
  93. auto: false,
  94. field: 'img',
  95. size: 1 * 1024,
  96. choose: function(obj) {
  97. obj.preview(function(index, file, result) {
  98. $('#upload-drag').html('<img src="' + result + '" style="height: 100%;width:100%;">');
  99. });
  100. }
  101. });
  102. });
  103. </script>
  104. {/block}