ui-uploadImgs.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <div class="row worknumber fontcolor-two margin-top-10" style="margin-right: 0;">
  2. <div class="col-md-12 formheard_pad">
  3. <div class="pull-left fontsizes-16 font-weight-500">
  4. 图片上传
  5. </div>
  6. </div>
  7. <div class="col-md-12" style="padding:0;">
  8. <div class="imgsBox">
  9. <div class="fileupload pos-rlt" ng-repeat="(idx,imageSrc) in imgshows" style="position: relative;">
  10. <div style="border-radius: 5px;overflow: hidden;width: 100%;height: 100%;">
  11. <img ng-src="{{imageSrc}}" style="max-width:200px;max-height:300px;margin:0 auto; display:block;"
  12. class="pos-rlt" width=100%; height=100%; ng-click="preview(imageSrc,idx)" />
  13. </div>
  14. <i class="icon close" ng-click="uploadimg_del($index, imgshows)">×</i>
  15. </div>
  16. <div id="upup" class="fileupload pos-rlt clear" style="position: relative;">
  17. <span class="icon ion-plus-round fileupload-icon">+</span>
  18. <input type="file" onchange="angular.element(this).scope().change(this)"
  19. style="display:inline-block; width: 100%; height: 100%; opacity:0" class="upinp" uploader="uploader"
  20. accept="image/png,image/gif,image/jpeg,image/jpg" name="uploadedFile" nv-file-select="">
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. <style type="text/css">
  26. .fileupload {
  27. width: 64px;
  28. height: 64px;
  29. border: 1px dotted #ccc;
  30. display: inline-block;
  31. background: #fff;
  32. border-radius: 5px;
  33. color: #d8d8d8;
  34. }
  35. .fileupload-icon {
  36. font-size: 32px;
  37. position: absolute;
  38. top: 50%;
  39. left: 50%;
  40. transform: translate(-50%, -50%);
  41. }
  42. .imgsBox {
  43. display: flex;
  44. justify-content: space-between;
  45. padding: 10px 10px;
  46. background: #F9F9F9;
  47. }
  48. .close {
  49. position: absolute;
  50. top: -5px;
  51. right: -6px;
  52. font-size: 16px;
  53. display: inline-block;
  54. width: 14px;
  55. height: 14px;
  56. color: #fff;
  57. background: #bd2535;
  58. line-height: 8px;
  59. text-align: center;
  60. border-radius: 9px;
  61. border: 1px solid #bd2535;
  62. opacity: 1;
  63. overflow: hidden;
  64. }
  65. .close:hover {
  66. opacity: .8;
  67. }
  68. </style>