cms-article-image.jsp 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. <%@page contentType="text/html;charset=UTF-8"%>
  2. <%@include file="/taglibs.jsp"%>
  3. <%pageContext.setAttribute("currentHeader", "cms");%>
  4. <%pageContext.setAttribute("currentMenu", "cms");%>
  5. <%pageContext.setAttribute("currentTitle", "cms-2");%>
  6. <!doctype html>
  7. <html>
  8. <head>
  9. <%@include file="/common/meta.jsp"%>
  10. <title>编辑</title>
  11. <%@include file="/common/s3.jsp"%>
  12. <script type="text/javascript">
  13. $(function() {
  14. $("#cms-article-imageForm").validate({
  15. submitHandler: function(form) {
  16. bootbox.animate(false);
  17. var box = bootbox.dialog('<div class="progress progress-striped active" style="margin:0px;"><div class="bar" style="width: 100%;"></div></div>');
  18. form.submit();
  19. },
  20. errorClass: 'validate-error'
  21. });
  22. })
  23. </script>
  24. <!-- blueimp Gallery styles -->
  25. <link rel="stylesheet" href="${tenantPrefix}/s/jquery-file-upload/blueimp-gallery.min.css">
  26. <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
  27. <link rel="stylesheet" href="${tenantPrefix}/s/jquery-file-upload/css/jquery.fileupload.css">
  28. <link rel="stylesheet" href="${tenantPrefix}/s/jquery-file-upload/css/jquery.fileupload-ui.css">
  29. <!-- CSS adjustments for browsers with JavaScript disabled -->
  30. <noscript><link rel="stylesheet" href="${tenantPrefix}/s/jquery-file-upload/css/jquery.fileupload-noscript.css"></noscript>
  31. <noscript><link rel="stylesheet" href="${tenantPrefix}/s/jquery-file-upload/css/jquery.fileupload-ui-noscript.css"></noscript>
  32. </head>
  33. <body>
  34. <%@include file="/header/_pim3.jsp"%>
  35. <div class="row-fluid">
  36. <%@include file="/menu/cms.jsp"%>
  37. <!-- start of main -->
  38. <section id="m-main" class="col-md-10" style=" ">
  39. <div class="panel panel-default">
  40. <div class="panel-heading">
  41. <i class="glyphicon glyphicon-list"></i>
  42. 编辑
  43. </div>
  44. <div class="panel-body">
  45. <form id="cmsArticleForm" method="post" action="cms-article-save.do" class="form-horizontal">
  46. <c:if test="${model != null}">
  47. <input id="cms-article_id" type="hidden" name="id" value="${model.id}">
  48. </c:if>
  49. <div class="form-group">
  50. <label class="control-label col-md-1" for="cms-article_cmsArticlename">栏目</label>
  51. <div class="col-sm-5">
  52. <select id="perm_resc" name="cmsCatalogId">
  53. <c:forEach items="${cmsCatalogs}" var="item">
  54. <option value="${item.id}" ${model.cmsCatalog.id==item.id ? 'selected' : ''}>${item.name}</option>
  55. </c:forEach>
  56. </select>
  57. </div>
  58. </div>
  59. <div class="form-group">
  60. <label class="control-label col-md-1" for="cms-article_cmsArticlename">标题</label>
  61. <div class="col-sm-5">
  62. <input id="cms-article_cmsArticlename" type="text" name="title" value="${model.title}" size="40" class="form-control required" minlength="2" maxlength="50">
  63. </div>
  64. </div>
  65. <!--
  66. <div class="form-group">
  67. <label class="control-label col-md-1" for="cms-article_cmsArticlename">短标题</label>
  68. <div class="col-sm-5">
  69. <input id="cms-article_cmsArticlename" type="text" name="shortTitle" value="${model.shortTitle}" size="40" class="text" minlength="2" maxlength="50">
  70. </div>
  71. </div>
  72. <div class="form-group">
  73. <label class="control-label col-md-1" for="cms-article_cmsArticlename">副标题</label>
  74. <div class="col-sm-5">
  75. <input id="cms-article_cmsArticlename" type="text" name="subTitle" value="${model.subTitle}" size="40" class="text" minlength="2" maxlength="50">
  76. </div>
  77. </div>
  78. -->
  79. <div class="form-group">
  80. <label class="control-label col-md-1" for="cmsArticle_summary">摘要</label>
  81. <div class="col-sm-5">
  82. <textarea id="cmsArticle_summary" name="summary" maxlength="200">${model.summary}</textarea>
  83. </div>
  84. </div>
  85. <div class="form-group">
  86. <div class="col-sm-12">
  87. <div class="fileupload-buttonbar">
  88. <div class="col-lg-7">
  89. <!-- The fileinput-button span is used to style the file input field as button -->
  90. <span class="btn btn-success fileinput-button">
  91. <i class="glyphicon glyphicon-plus"></i>
  92. <span>添加</span>
  93. <input type="file" name="files[]" multiple data-no-uniform="true">
  94. </span>
  95. <button type="submit" class="btn btn-primary start">
  96. <i class="glyphicon glyphicon-upload"></i>
  97. <span>上传</span>
  98. </button>
  99. <button type="reset" class="btn btn-warning cancel">
  100. <i class="glyphicon glyphicon-ban-circle"></i>
  101. <span>取消</span>
  102. </button>
  103. <button type="button" class="btn btn-danger delete">
  104. <i class="glyphicon glyphicon-trash"></i>
  105. <span>删除</span>
  106. </button>
  107. <input type="checkbox" class="toggle">
  108. <!-- The global file processing state -->
  109. <span class="fileupload-process"></span>
  110. </div>
  111. <!-- The global progress state -->
  112. <div class="col-lg-5 fileupload-progress fade">
  113. <!-- The global progress bar -->
  114. <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
  115. <div class="progress-bar progress-bar-success" style="width:0%;"></div>
  116. </div>
  117. <!-- The extended global progress state -->
  118. <div class="progress-extended">&nbsp;</div>
  119. </div>
  120. </div>
  121. <!-- The table listing the files available for upload/download -->
  122. <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
  123. </div>
  124. </div>
  125. <!--
  126. <div class="form-group">
  127. <label class="control-label col-md-1" for="cms-article_cmsArticlename">图标</label>
  128. <div class="col-sm-5">
  129. <input id="cms-article_cmsArticlename" type="text" name="logo" value="${model.logo}" size="40" class="text" minlength="2" maxlength="50">
  130. </div>
  131. </div>
  132. <div class="form-group">
  133. <label class="control-label col-md-1" for="cms-article_cmsArticlename">关键字</label>
  134. <div class="col-sm-5">
  135. <input id="cms-article_cmsArticlename" type="text" name="keyword" value="${model.keyword}" size="40" class="text" minlength="2" maxlength="50">
  136. </div>
  137. </div>
  138. <div class="form-group">
  139. <label class="control-label col-md-1" for="cms-article_cmsArticlename">标签</label>
  140. <div class="col-sm-5">
  141. <input id="cms-article_cmsArticlename" type="text" name="tags" value="${model.tags}" size="40" class="text" minlength="2" maxlength="50">
  142. </div>
  143. </div>
  144. <div class="form-group">
  145. <label class="control-label col-md-1" for="cms-article_cmsArticlename">来源</label>
  146. <div class="col-sm-5">
  147. <input id="cms-article_cmsArticlename" type="text" name="source" value="${model.source}" size="40" class="text" minlength="2" maxlength="50">
  148. </div>
  149. </div>
  150. <div class="form-group">
  151. <label class="control-label col-md-1" for="cms-article_cmsArticlename">允许评论</label>
  152. <div class="col-sm-5">
  153. <input id="cms-article_cmsArticlename" type="checkbox" name="allowComment" value="1" class="text" ${model.allowComment == 1 ? 'checked' : ''}>
  154. </div>
  155. </div>
  156. <div class="form-group">
  157. <label class="control-label col-md-1" for="cms-article_cmsArticlename">状态</label>
  158. <div class="col-sm-5">
  159. <input id="cms-article_cmsArticlename" type="checkbox" name="status" value="1" class="text" ${model.status == 1 ? 'checked' : ''}>
  160. </div>
  161. </div>
  162. -->
  163. <!--
  164. <div class="form-group">
  165. <label class="control-label col-md-1" for="cms-article_cmsArticlename">创建时间</label>
  166. <div class="col-sm-5">
  167. <input id="cms-article_cmsArticlename" type="text" name="createTime" value="${model.createTime}" class="text">
  168. </div>
  169. </div>
  170. <div class="form-group">
  171. <label class="control-label col-md-1" for="cms-article_cmsArticlename">发布时间</label>
  172. <div class="col-sm-5">
  173. <input id="cms-article_cmsArticlename" type="text" name="publishTime" value="${model.publishTime}" class="text">
  174. </div>
  175. </div>
  176. <div class="form-group">
  177. <label class="control-label col-md-1" for="cms-article_cmsArticlename">关闭时间</label>
  178. <div class="col-sm-5">
  179. <input id="cms-article_cmsArticlename" type="text" name="closeTime" value="${model.closeTime}" class="text">
  180. </div>
  181. </div>
  182. -->
  183. <!--
  184. <div class="form-group">
  185. <label class="control-label col-md-1" for="cms-article_cmsArticlename">类型</label>
  186. <div class="col-sm-5">
  187. <input id="cms-article_cmsArticlename" type="text" name="type" value="${model.type}" class="text">
  188. </div>
  189. </div>
  190. <div class="form-group">
  191. <label class="control-label col-md-1" for="cms-article_cmsArticlename">置顶</label>
  192. <div class="col-sm-5">
  193. <input id="cms-article_cmsArticlename" type="text" name="top" value="${model.top}" class="text">
  194. </div>
  195. </div>
  196. <div class="form-group">
  197. <label class="control-label col-md-1" for="cms-article_cmsArticlename">权重</label>
  198. <div class="col-sm-5">
  199. <input id="cms-article_cmsArticlename" type="text" name="weight" value="${model.weight}" class="text">
  200. </div>
  201. </div>
  202. -->
  203. <div class="form-group">
  204. <div class="col-sm-5">
  205. <button id="submitButton" class="btn a-submit btn-primary"><spring:message code='core.input.save' text='保存'/></button>
  206. <button type="button" onclick="history.back();" class="btn a-cancel btn-link"><spring:message code='core.input.back' text='返回'/></button>
  207. </div>
  208. </div>
  209. </form>
  210. <!-- The blueimp Gallery widget -->
  211. <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
  212. <div class="slides"></div>
  213. <h3 class="title"></h3>
  214. <a class="prev">‹</a>
  215. <a class="next">›</a>
  216. <a class="close">×</a>
  217. <a class="play-pause"></a>
  218. <ol class="indicator"></ol>
  219. </div>
  220. </div>
  221. </div>
  222. </section>
  223. <!-- end of main -->
  224. </div>
  225. </body>
  226. <!-- The template to display files available for upload -->
  227. <script id="template-upload" type="text/x-tmpl">
  228. {% for (var i=0, file; file=o.files[i]; i++) { %}
  229. <tr class="template-upload fade">
  230. <td>
  231. <span class="preview"></span>
  232. </td>
  233. <td>
  234. <p class="name">{%=file.name%}</p>
  235. <strong class="error text-danger"></strong>
  236. </td>
  237. <td>
  238. <p class="size">Processing...</p>
  239. <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
  240. </td>
  241. <td>
  242. {% if (!i && !o.options.autoUpload) { %}
  243. <button class="btn btn-primary start" disabled>
  244. <i class="glyphicon glyphicon-upload"></i>
  245. <span>上传</span>
  246. </button>
  247. {% } %}
  248. {% if (!i) { %}
  249. <button class="btn btn-warning cancel">
  250. <i class="glyphicon glyphicon-ban-circle"></i>
  251. <span>取消</span>
  252. </button>
  253. {% } %}
  254. </td>
  255. </tr>
  256. {% } %}
  257. </script>
  258. <!-- The template to display files available for download -->
  259. <script id="template-download" type="text/x-tmpl">
  260. {% for (var i=0, file; file=o.files[i]; i++) { %}
  261. <tr class="template-download fade">
  262. <td>
  263. <span class="preview">
  264. {% if (file.thumbnailUrl) { %}
  265. <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
  266. {% } %}
  267. </span>
  268. </td>
  269. <td>
  270. <p class="name">
  271. {% if (file.url) { %}
  272. <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
  273. {% } else { %}
  274. <span>{%=file.name%}</span>
  275. {% } %}
  276. </p>
  277. {% if (file.error) { %}
  278. <div><span class="label label-danger">Error</span> {%=file.error%}</div>
  279. {% } %}
  280. </td>
  281. <td>
  282. <span class="size">{%=o.formatFileSize(file.size)%}</span>
  283. </td>
  284. <td>
  285. {% if (file.deleteUrl) { %}
  286. <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
  287. <i class="glyphicon glyphicon-trash"></i>
  288. <span>删除</span>
  289. </button>
  290. <input type="checkbox" name="delete" value="1" class="toggle">
  291. {% } else { %}
  292. <button class="btn btn-warning cancel">
  293. <i class="glyphicon glyphicon-ban-circle"></i>
  294. <span>取消</span>
  295. </button>
  296. {% } %}
  297. </td>
  298. </tr>
  299. {% } %}
  300. </script>
  301. <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
  302. <script src="${tenantPrefix}/s/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
  303. <!-- The Templates plugin is included to render the upload/download listings -->
  304. <script src="${tenantPrefix}/s/jquery-file-upload/tmpl.min.js"></script>
  305. <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
  306. <script src="${tenantPrefix}/s/jquery-file-upload/load-image.all.min.js"></script>
  307. <!-- The Canvas to Blob plugin is included for image resizing functionality -->
  308. <script src="${tenantPrefix}/s/jquery-file-upload/canvas-to-blob.min.js"></script>
  309. <!-- blueimp Gallery script -->
  310. <script src="${tenantPrefix}/s/jquery-file-upload/jquery.blueimp-gallery.min.js"></script>
  311. <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
  312. <script src="${tenantPrefix}/s/jquery-file-upload/js/jquery.iframe-transport.js"></script>
  313. <!-- The basic File Upload plugin -->
  314. <script src="${tenantPrefix}/s/jquery-file-upload/js/jquery.fileupload.js"></script>
  315. <!-- The File Upload processing plugin -->
  316. <script src="${tenantPrefix}/s/jquery-file-upload/js/jquery.fileupload-process.js"></script>
  317. <!-- The File Upload image preview & resize plugin -->
  318. <script src="${tenantPrefix}/s/jquery-file-upload/js/jquery.fileupload-image.js"></script>
  319. <!-- The File Upload audio preview plugin -->
  320. <script src="${tenantPrefix}/s/jquery-file-upload/js/jquery.fileupload-audio.js"></script>
  321. <!-- The File Upload video preview plugin -->
  322. <script src="${tenantPrefix}/s/jquery-file-upload/js/jquery.fileupload-video.js"></script>
  323. <!-- The File Upload validation plugin -->
  324. <script src="${tenantPrefix}/s/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
  325. <!-- The File Upload user interface plugin -->
  326. <script src="${tenantPrefix}/s/jquery-file-upload/js/jquery.fileupload-ui.js"></script>
  327. <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
  328. <!--[if (gte IE 8)&(lt IE 10)]>
  329. <script src="${tenantPrefix}/s/jquery-file-upload/js/cors/jquery.xdr-transport.js"></script>
  330. <![endif]-->
  331. </body>
  332. <script>
  333. $(function () {
  334. 'use strict';
  335. // Initialize the jQuery File Upload widget:
  336. $('#cmsArticleForm').fileupload({
  337. // Uncomment the following to send cross-domain cookies:
  338. //xhrFields: {withCredentials: true},
  339. url: '${tenantPrefix}/cms/cms-article-upload.do?id=${model.id}'
  340. });
  341. // Enable iframe cross-domain access via redirect option:
  342. $('#cmsArticleForm').fileupload(
  343. 'option',
  344. 'redirect',
  345. window.location.href.replace(
  346. /\/[^\/]*$/,
  347. '/cors/result.html?%s'
  348. )
  349. );
  350. $('#cmsArticleForm').fileupload('option', {
  351. // Enable image resizing, except for Android and Opera,
  352. // which actually support image resizing, but fail to
  353. // send Blob objects via XHR requests:
  354. disableImageResize: /Android(?!.*Chrome)|Opera/
  355. .test(window.navigator.userAgent),
  356. maxFileSize: 5000000,
  357. acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
  358. });
  359. // Upload server status check for browsers with CORS support:
  360. if ($.support.cors) {
  361. $.ajax({
  362. url: '${tenantPrefix}/cms/cms-article-download.do?id=${model.id}',
  363. type: 'HEAD'
  364. }).fail(function () {
  365. $('<div class="alert alert-danger"/>')
  366. .text('服务器异常,暂时无法上传 - ' +
  367. new Date())
  368. .appendTo('#fileupload');
  369. });
  370. }
  371. // Load existing files:
  372. $('#cmsArticleForm').addClass('fileupload-processing');
  373. $.ajax({
  374. // Uncomment the following to send cross-domain cookies:
  375. //xhrFields: {withCredentials: true},
  376. url: '${tenantPrefix}/cms/cms-article-download.do?id=${model.id}',
  377. dataType: 'json',
  378. context: $('#fileupload')[0]
  379. }).always(function () {
  380. $(this).removeClass('fileupload-processing');
  381. }).done(function (result) {
  382. $(this).fileupload('option', 'done')
  383. .call(this, $.Event('done'), {result: result});
  384. });
  385. });
  386. </script>
  387. </html>