index.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <style>
  2. .upload-image {
  3. background: url('__CDN__/assets/addons/example/img/plus.png') no-repeat center center;
  4. background-size: 30px 30px;
  5. height: 30px;
  6. width: 30px;
  7. border: 1px solid #ccc;
  8. }
  9. </style>
  10. <div class="row">
  11. <!--内容-->
  12. <div class="col-md-6">
  13. <div class="box box-success">
  14. <div class="panel-body">
  15. <form id="aaa-form" role="form" data-toggle="validator" method="POST" action="">
  16. <div class="form-group row">
  17. <label class="control-label col-xs-12">版本照</label>
  18. <div class="col-xs-12">
  19. <div class="input-group">
  20. <input data-rule="required" class="form-control" name="row[name]" type="hidden" value="{$iantern_slide->name}">
  21. <input id="a-files" data-rule="required" class="form-control" size="50" name="row[image]" type="text" value="{$iantern_slide->image}">
  22. <div class="input-group-addon no-border no-padding">
  23. <span><button type="button" id="plupload-files" class="btn btn-danger plupload" data-input-id="a-files" data-mimetype="*" data-multiple="true" data-preview-id="aa-files"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
  24. <span><button type="button" id="fachoose-files" class="btn btn-primary fachoose" data-input-id="a-files" data-mimetype="*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
  25. </div>
  26. <span class="msg-box n-right" for="a-files"></span>
  27. </div>
  28. <!--ul需要添加 data-template和data-name属性,并一一对应且唯一 -->
  29. <ul class="row list-inline plupload-preview" id="aa-files" data-template="introtpl" data-name="row[image]"></ul>
  30. <!--请注意 ul和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏-->
  31. <!--这里自定义图片预览的模板 开始-->
  32. <script type="text/html" id="introtpl">
  33. <li class="col-xs-3">
  34. <a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
  35. <img src="<%=fullurl%>" class="img-responsive">
  36. </a>
  37. <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
  38. </li>
  39. </script>
  40. <!--这里自定义图片预览的模板 结束-->
  41. </div>
  42. </div>
  43. <div class="form-group row">
  44. <label class="control-label col-xs-12"></label>
  45. <div class="col-xs-12">
  46. <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
  47. <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
  48. </div>
  49. </div>
  50. </form>
  51. </div>
  52. </div>
  53. </div>
  54. </div>