_js.blade.php 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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-select{
  39. text-align: center;
  40. height: 38px;
  41. line-height: 1.3;
  42. line-height: 38px\9;
  43. border-width: 1px;
  44. border-style: solid;
  45. background-color: #fff;
  46. border-radius: 2px;
  47. }
  48. </style>
  49. <script>
  50. layui.use(['upload'],function () {
  51. var upload = layui.upload
  52. //普通图片上传
  53. var uploadInst = upload.render({
  54. elem: '#uploadPic'
  55. ,url: '{{ route("uploadImg") }}'
  56. ,multiple: false
  57. ,data:{"_token":"{{ csrf_token() }}"}
  58. ,before: function(obj){
  59. //预读本地文件示例,不支持ie8
  60. /*obj.preview(function(index, file, result){
  61. $('#layui-upload-box').append('<li><img src="'+result+'" /><p>待上传</p></li>')
  62. });*/
  63. obj.preview(function(index, file, result){
  64. $('#layui-upload-box').html('<li><img src="'+result+'" /><p>上传中</p></li>')
  65. });
  66. }
  67. ,done: function(res){
  68. //如果上传失败
  69. if(res.code == 0){
  70. $("#avatar").val(res.url);
  71. $('#layui-upload-box li p').text('上传成功');
  72. return layer.msg(res.msg,{icon:6});
  73. }
  74. return layer.msg(res.msg,{icon:5});
  75. }
  76. });
  77. });
  78. </script>