• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    ThinkPHP5+Layui实现图片上传加预览功能

    html代码

    div class="layui-upload">
     button type="button" class="layui-btn" id="cover">上传封面/button>
    /div> 
    div class="layui-input-inline">
     img id="preview" width="200px" height="200px">
    /div>

    js代码

    var uploadInst = upload.render({
      elem:'#cover'
      ,url:'addCourse'
      ,accept:'file' // 允许上传的文件类型
      ,auto:true // 自动上传
      ,before:function (obj) {
       console.log(obj);
       // 预览
       obj.preview(function(index,file,result) {
        // console.log(file.name); //图片名字
        // console.log(file.type); //图片格式
        // console.log(file.size); //图片大小
        // console.log(result); //图片地址
        $('#preview').attr('src',result); //图片链接 base64
       });
       // layer.load();
      }
      // 上传成功回调
      ,done:function(res) {
       // console.log(upload);
       console.log(res);
      }
      // 上传失败回调
      ,error:function(index,upload) {
       // 上传失败
      }
     });

    php接口

    $file = request()->file('file');
     // 移动到框架应用根目录/public/uploads/ 目录下
     $info = $file->move('public/upload/');
     if ($info) {
      $path = 'public/upload/'.$info->getSaveName();
      return return_succ($path);
     }

    总结

    以上所述是小编给大家介绍的ThinkPHP5+Layui实现图片上传加预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
    • thinkphp3.2实现上传图片的控制器方法
    • thinkPHP利用ajax异步上传图片并显示、删除的示例
    • thinkphp ajaxfileupload实现异步上传图片的示例
    • thinkphp5上传图片及生成缩略图公共方法(分享)
    • thinkPHP实现上传图片及生成缩略图功能示例
    • 使用ThinkPHP+Uploadify实现图片上传功能
    • ThinkPHP实现图片上传操作的方法详解
    • thinkphp jquery实现图片上传和预览效果
    • 基于ThinkPHP5.0实现图片上传插件
    • ThinkPHP5.0 图片上传生成缩略图实例代码说明
    • TP框架实现上传一张图片和批量上传图片的方法分析
    上一篇:PHP实现类似题库抽题效果
    下一篇:Laravel框架实现修改登录和注册接口数据返回格式的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    ThinkPHP5+Layui实现图片上传加预览功能 ThinkPHP5+Layui,实现,图片,