add.php 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <div class="row-content am-cf">
  2. <div class="row">
  3. <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
  4. <div class="widget am-cf">
  5. <form id="my-form" class="am-form tpl-form-line-form" method="post">
  6. <div class="widget-body">
  7. <fieldset>
  8. <div class="widget-head am-cf">
  9. <div class="widget-title am-fl">添加资质</div>
  10. </div>
  11. <div class="am-form-group">
  12. <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">资质名称 </label>
  13. <div class="am-u-sm-9 am-u-end">
  14. <input type="text" class="tpl-form-input" name="name"
  15. value="" placeholder="请输入标题" required>
  16. </div>
  17. </div>
  18. <div class="am-form-group">
  19. <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">资质分类 </label>
  20. <div class="am-u-sm-9 am-u-end">
  21. <select name="certificate_category_id"
  22. data-am-selected="{searchBox: 1, btnSize: 'sm',
  23. placeholder:'请选择', maxHeight: 400}">
  24. <option value=""></option>
  25. <?php if (isset($category)): foreach ($category as $item): ?>
  26. <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
  27. <?php endforeach; endif; ?>
  28. </select>
  29. <small class="am-margin-left-xs">
  30. <a href="<?= url('content.certificate.category/add') ?>">去添加</a>
  31. </small>
  32. </div>
  33. </div>
  34. <div class="am-form-group">
  35. <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">文件上传 </label>
  36. <div class="am-u-sm-9 am-u-end">
  37. <div class="am-form-file">
  38. <div id="uploader-demo">
  39. <!--用来存放item-->
  40. <div id="filePicker">选择文件</div>
  41. <div id="fileList" class="uploader-list am-cf"></div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="am-form-group">
  47. <label class="am-u-sm-3 am-u-lg-2 am-form-label">文件宽度 </label>
  48. <div class="am-u-sm-9 am-u-end">
  49. <input type="text" class="tpl-form-input" name="width"
  50. value="" placeholder="请输入文件宽度">
  51. <div class="help-block">
  52. <small>pdf文件请填写文件宽度,默认单位为mm(毫米)</small>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="am-form-group">
  57. <label class="am-u-sm-3 am-u-lg-2 am-form-label">文件高度 </label>
  58. <div class="am-u-sm-9 am-u-end">
  59. <input type="text" class="tpl-form-input" name="height"
  60. value="" placeholder="请输入文件高度">
  61. <div class="help-block">
  62. <small>pdf文件请填写文件高度,默认单位为mm(毫米)</small>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="am-form-group">
  67. <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
  68. <button type="submit" class="j-submit am-btn am-btn-secondary">提交
  69. </button>
  70. </div>
  71. </div>
  72. </fieldset>
  73. </div>
  74. </form>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. <script src="static/common/webuploader/webuploader.js"></script>
  80. <script>
  81. $(function () {
  82. /**
  83. * 表单验证提交
  84. * @type {*}
  85. */
  86. $('#my-form').superForm();
  87. // 初始化Web Uploader
  88. var uploader = WebUploader.create({
  89. // 选完文件后,是否自动上传。
  90. auto: true,
  91. multiple: false,
  92. // swf文件路径
  93. swf: BASE_URL + '/static/common/webuploader/Uploader.swf',
  94. // 文件接收服务端。
  95. server: STORE_URL + '/upload/file',
  96. // 选择文件的按钮。可选。
  97. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  98. pick: '#filePicker',
  99. // 文件上传域的name
  100. fileVal: 'iFile',
  101. // 图片上传前不进行压缩
  102. compress: false,
  103. // 允许重复
  104. duplicate: true,
  105. // 只允许选择图片文件。
  106. accept: {
  107. title: 'File',
  108. extensions: 'jpg,jpeg,png,pdf',
  109. mimeTypes: 'image/*,application/pdf'
  110. }
  111. });
  112. // 验证大小
  113. uploader.on('error', function (type) {
  114. if (type === 'F_DUPLICATE') {
  115. console.log('请不要重复选择文件!');
  116. } else if (type === 'F_EXCEED_SIZE') {
  117. alert('文件大小不可超过' + maxSize + 'm 哦!换个小点的文件吧!');
  118. }
  119. });
  120. uploader.on('fileQueued', function (file, response) {
  121. layer.load();
  122. });
  123. uploader.on('uploadSuccess', function (file, response) {
  124. layer.close(layer.load());
  125. if (response.code === 1) {
  126. var $list = $("#fileList");
  127. $list.children().remove();
  128. var $li = $(
  129. '<div class="file-item" style="min-width: 40px;font-size: 14px;border: 0;margin: 10px 0 0 0">' +
  130. '<a title="' + response.data.file_name + '" target="_blank">' + response.data.file_name +
  131. '</a>' +
  132. '<input class="file_ids" type="hidden" name="file_id" value="">' +
  133. '<i class="iconfont icon-shanchu file-item-delete"></i>' +
  134. '</div>'
  135. );
  136. $a = $li.find('a');
  137. $input = $li.find('input');
  138. $delete = $li.find('.file-item-delete');
  139. // 删除文件
  140. $delete.on('click', function () {
  141. uploader.removeFile(file);
  142. $delete.parent().remove();
  143. });
  144. // $list为容器jQuery实例
  145. $list.append($li);
  146. // 创建缩略图
  147. // 如果为非图片文件,可以不用调用此方法。
  148. // thumbnailWidth x thumbnailHeight 为 100 x 100
  149. $input.attr('value', response.data.file_id);
  150. $a.attr('href', response.data.file_path);
  151. } else {
  152. uploader.uploadError(file, response);
  153. }
  154. });
  155. // 文件上传失败回调函数
  156. uploader.uploadError = function (file, reason) {
  157. layer.msg(reason.msg, {anim: 6});
  158. };
  159. });
  160. </script>