layui图片上传

1、引入layui相关的css文件以及js文件

<link rel="stylesheet" href="/css/layui/layui.css" media="all">

<script src="/ljs/layui/layui.js"></script>

2、页面添加控件

<p class="layui-upload">

  <button class="layui-btn" id="test1" type="button">上传图片</button>

  <p class="layui-upload-list">

    <img class="layui-upload-img" id="demo1">

    <p id="demoText"></p>

  </p>

</p>  

3、渲染样式以及绑定接口

<script>

layui.use('upload', function(){

  var $ = layui.jquery

  ,upload = layui.upload;

  var uploadInst = upload.render({

    elem: '#test1'

    ,url: '/upload'

    ,before: function(obj){//预读本地文件示例,不支持ie8

      obj.preview(function(index, file, result){

        $('#demo1').attr('src', result); //图片链接(base64

      }); }

,done: function(res){

//如果上传失败

      if(res.code > 0){

        return layer.msg('上传失败');

      }}

    ,error: function(){

      //演示失败状态,并实现重传

      var demoText = $('#demoText');

      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');

      demoText.find('.demo-reload').on('click', function(){

        uploadInst.upload();

      });}});

</script>

4、路由

Route::get('/upload', 'Controller@/upload');

5、配置

config/filesystems.php

'public' => [ 'driver' => 'local', 'root' => storage_path('app/public'), 'visibility' => 'public', ],

6、控制器

$file = $request->file('demo1');

$originalName = $file->getClientOriginalName(); // 文件原名

$ext = $file->getClientOriginalExtension(); // 扩展名

$realPath = $file->getRealPath(); //临时文件的绝对路径

$type = $file->getClientMimeType(); // image/jpeg // 上传文件

$filename = date('Y-m-d-H-i-s') . '-' . uniqid() . '.' . $ext; // 使用我们新建的uploads本地存储空间(目录) //这里的uploads是配置文件的名称

$bool = DB::table('img')->insert( ['imgl' => $filename];

return $bool

                                                                       (胡援实习第二周)


日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容