_js.blade.php 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <style>
  2. #layui-upload-box li{
  3. width: 120px;
  4. height: 100px;
  5. float: left;
  6. position: relative;
  7. overflow: hidden;
  8. margin-right: 10px;
  9. border:1px solid #ddd;
  10. }
  11. #layui-upload-box li img{
  12. width: 100%;
  13. }
  14. #layui-upload-box li p{
  15. width: 100%;
  16. height: 22px;
  17. font-size: 12px;
  18. position: absolute;
  19. left: 0;
  20. bottom: 0;
  21. line-height: 22px;
  22. text-align: center;
  23. color: #fff;
  24. background-color: #333;
  25. opacity: 0.6;
  26. }
  27. #layui-upload-box li i{
  28. display: block;
  29. width: 20px;
  30. height:20px;
  31. position: absolute;
  32. text-align: center;
  33. top: 2px;
  34. right:2px;
  35. z-index:999;
  36. cursor: pointer;
  37. }
  38. #layui-upload-box-samll li{
  39. width: 120px;
  40. height: 100px;
  41. float: left;
  42. position: relative;
  43. overflow: hidden;
  44. margin-right: 10px;
  45. border:1px solid #ddd;
  46. }
  47. #layui-upload-box-samll li img{
  48. width: 100%;
  49. }
  50. #layui-upload-box-samll li p{
  51. width: 100%;
  52. height: 22px;
  53. font-size: 12px;
  54. position: absolute;
  55. left: 0;
  56. bottom: 0;
  57. line-height: 22px;
  58. text-align: center;
  59. color: #fff;
  60. background-color: #333;
  61. opacity: 0.6;
  62. }
  63. #layui-upload-box-samll li i{
  64. display: block;
  65. width: 20px;
  66. height:20px;
  67. position: absolute;
  68. text-align: center;
  69. top: 2px;
  70. right:2px;
  71. z-index:999;
  72. cursor: pointer;
  73. }
  74. </style>
  75. <script>
  76. layui.use(['upload'],function () {
  77. var upload = layui.upload
  78. //普通图片上传
  79. var uploadInst = upload.render({
  80. elem: '#uploadPic'
  81. ,url: '{{ route("admin.uploadImg") }}'
  82. ,multiple: false
  83. ,data:{"_token":"{{ csrf_token() }}"}
  84. ,before: function(obj){
  85. //预读本地文件示例,不支持ie8
  86. /*obj.preview(function(index, file, result){
  87. $('#layui-upload-box').append('<li><img src="'+result+'" /><p>待上传</p></li>')
  88. });*/
  89. obj.preview(function(index, file, result){
  90. $('#layui-upload-box').html('<li><img src="'+result+'" /><p>上传中</p></li>')
  91. });
  92. }
  93. ,done: function(res){
  94. //如果上传失败
  95. if(res.code == 0){
  96. $("#iconUrl").val(res.url);
  97. $('#layui-upload-box li p').text('上传成功');
  98. return layer.msg(res.msg,{icon:6});
  99. }
  100. return layer.msg(res.msg,{icon:5});
  101. }
  102. });
  103. var upload_2 = layui.upload
  104. var uploadInstsmall = upload_2.render({
  105. elem: '#uploadPicSmall'
  106. ,url: '{{ route("admin.uploadImg") }}'
  107. ,multiple: false
  108. ,data:{"_token":"{{ csrf_token() }}"}
  109. ,before: function(obj){
  110. //预读本地文件示例,不支持ie8
  111. /*obj.preview(function(index, file, result){
  112. $('#layui-upload-box').append('<li><img src="'+result+'" /><p>待上传</p></li>')
  113. });*/
  114. obj.preview(function(index, file, result){
  115. $('#layui-upload-box-samll').html('<li><img src="'+result+'" /><p>上传中</p></li>')
  116. });
  117. }
  118. ,done: function(res){
  119. //如果上传失败
  120. if(res.code == 0){
  121. $("#smalliconUrl").val(res.url);
  122. $('#layui-upload-box-samll li p').text('上传成功');
  123. return layer.msg(res.msg,{icon:6});
  124. }
  125. return layer.msg(res.msg,{icon:5});
  126. }
  127. });
  128. });
  129. </script>