thinkphp5及layui图片上传代码分享

提问 未结 精帖
6 3879
金满斗
金满斗 2017-2-17
悬赏:5飞吻
昨晚可能自己有的小问题引起的原因,用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;
}

}
回帖
  • 星魄
    2017-2-25
    ie上面上传可以吗?
    0 回复
  • qqff
    2017-5-2
    这个接口是什么意思
    0 回复
  • 汪振
    2017-5-24
    为什么我使用就jquery.js:3 POST http://www.tp5.com/wechat/upload/uploads.html 500 (Internal Server Error)这个错误
    0 回复
  • 胡汉三
    2017-5-29
    很有用,想问一下。我图片上传成功。但是异步哪里的弹窗不能出来。还报这个错误Call to a member function move() on null
    0 回复
  • 胡汉三
    2017-5-29
    想问下你异步那里怎么写的
    0 回复
  • 胡汉三
    2017-5-29
    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 回复