thinkphp5及layui图片上传代码分享

精帖 未结贴
6 1902
昨晚可能自己有的小问题引起的原因,用TP后台搞layui的上传组件竟然没成功,今天再次试验了下,很简单。昨晚在论坛看这个没看到现成的例子。我向来伸手党,今天也简单奉献下吧。

html文件片段。因为自己的项目里,懒得分离,上片段吧。
<div class="layui-form-item">
<label class="layui-form-label">上传头像</label>
<div class="layui-input-block">

<div class="face-img">
<img id="upload" src="/uploads/20170217\1290ff6d12ed787005b05a7c28b1bfa5.jpg">
<div class="site-demo-upload"><input type="file" name="file" class="layui-upload-file">
</div>
</div>
</div>

</div>

<script type="text/javascript" src="__PUBLIC__/common/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form','upload','jquery'],function(){
window.jQuery = window.$ = layui.jquery;
var form = layui.form();
layui.upload({
url: '{:url('upload/index')}' ,//上传接口
success: function(res){
//上传成功后的回调
$("#upload").attr("src",res.src);
console.log(res.src);
}
});

});
</script>
后台php的代码
<?php
/***
**layui上传的后台接口
*/
namespace app\admin\controller;
use \think\Controller;

class Upload extends Controller
{

public function index(){
$ret = array(); //返回的上传文件状态数组
if ($_FILES["file"]["error"] > 0)
{
$ret["message"] = $_FILES["file"]["error"] ;
$ret["status"] = 0;
$ret["src"] = "";
return json($ret);
}else{
$pic = $this->upload();
if($pic['info']== 1){
$url = '/uploads/'.$pic['savename'];
} else {
$ret["message"] = $this->error($pic['err']);
$ret["status"] = 0;
}
$ret["message"]= "图片上传成功!";
$ret["status"] = 1;
$ret["src"] = $url;
return json($ret);
}

}


//图片上传代码
private function upload(){
$file = request()->file('file');
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
$reubfo = array(); //定义一个返回的数组
if($info){
$reubfo['info']= 1;
$reubfo['savename'] = $info->getSaveName();
}else{
// 上传失败获取错误信息
$reubfo['info']= 0;
$reubfo['err'] = $file->getError();;
}
return $reubfo;
}

}
空闲广告位,联系:xianxin@layui.com
  • 星魄 星魄
    2017-02-25 16:40:55
    ie上面上传可以吗?
    0 回复
  • qqff qqff
    2017-05-02 21:31:48
    这个接口是什么意思
    0 回复
  • 汪振 汪振
    2017-05-24 16:49:49
    为什么我使用就jquery.js:3 POST http://www.tp5.com/wechat/upload/uploads.html 500 (Internal Server Error)这个错误
    0 回复
  • 胡汉三 胡汉三
    28天前
    很有用,想问一下。我图片上传成功。但是异步哪里的弹窗不能出来。还报这个错误Call to a member function move() on null
    0 回复
  • 胡汉三 胡汉三
    28天前
    想问下你异步那里怎么写的
    0 回复
  • 胡汉三 胡汉三
    28天前
    form.on('submit(add)', function(data){

    $.ajax({
    url: '{:url('admin/banners/upload')}',
    type: 'POST',
    dataType: 'json',
    data: data.field,
    })
    .done(function(respones) {
    if(respones.info==0){
    layer.msg(respones.info, function(){}
    );
    }else{
    layer.alert(respones.info, {icon: 6},function () {
    // 获得frame索引
    var index = parent.layer.getFrameIndex(window.name);
    //关闭当前frame
    parent.layer.close(index);
    parent.location.reload();

    });
    }
    })
    .fail(function() {
    console.log("error");
    })

    return false;
    });
    0 回复
最近热帖
完全基于 layui 开发的后台管理模板 2856
三层导航怎么做? 657
「源码市场」 正式版本上线 基于layui开发 619
2.0啥时候出啊,新项目要启动了 565
给2.0一些期待 487
麻烦朋友们投个票呗,FLY社区模板+thinkphp5驱动+个人DIY 388
layui整合datatable了么 338
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 292
form.render('select') 更新渲染问题 252
这个社区的完整源码能不能共享 242
近期热议
完全基于 layui 开发的后台管理模板 37
layui富文本编辑器图片上传无法回显 15
表单校验无效,找了好长时间找不到原因,求大神看下 14
这个社区的完整源码能不能共享 14
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 10
select 动态操作不起作用,求助 10
多个layer的bug 10
给2.0一些期待 9
laytpl不解析 8
文本编辑器出不来 8