_js.blade.php 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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. </style>
  39. <script>
  40. layui.use(['upload'],function () {
  41. var upload = layui.upload
  42. //普通图片上传
  43. var uploadInst = upload.render({
  44. elem: '#uploadPic'
  45. ,url: '{{ route("uploadImg") }}'
  46. ,multiple: false
  47. ,data:{"_token":"{{ csrf_token() }}"}
  48. ,before: function(obj){
  49. //预读本地文件示例,不支持ie8
  50. /*obj.preview(function(index, file, result){
  51. $('#layui-upload-box').append('<li><img src="'+result+'" /><p>待上传</p></li>')
  52. });*/
  53. obj.preview(function(index, file, result){
  54. $('#layui-upload-box').html('<li><img src="'+result+'" /><p>上传中</p></li>')
  55. });
  56. }
  57. ,done: function(res){
  58. //如果上传失败
  59. if(res.code == 0){
  60. $("#thumb").val(res.url);
  61. $('#layui-upload-box li p').text('上传成功');
  62. return layer.msg(res.msg);
  63. }
  64. return layer.msg(res.msg);
  65. }
  66. });
  67. })
  68. </script>
  69. <!-- 实例化编辑器 -->
  70. <script type="text/javascript">
  71. var ue = UE.getEditor('container');
  72. ue.ready(function() {
  73. ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');//此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值.
  74. });
  75. </script>