php+html5实现无刷新图片上传

导入必要文件

<link rel="stylesheet" href="/tp5/public/static/layui/css/layui.css">
<script src="/tp5/public/static/js/jquery.min.js"></script>
<script src="/tp5/public/static/layui/layui.js"></script>

编写html+js代码

<div class="layui-form-item">
    <label class="layui-form-label">缩略图</label>
    <div class="layui-input-block">
        <input type="text" name="thumb" value="" class="layui-input layui-input-inline" id="thumb">
        <input type="file" name="file" class="layui-upload-file">
    </div>
</div>

<script>
 layui.use('upload', function(){
    layui.upload({
        url: "URL",//上传接口
        ext: 'jpg|png|gif',//限制文件
        success: function (result) {
            document.getElementById('thumb').value = result.filename;
        }
    });
 });
</script>

使用gthinkphp5编写上传接口

    public function uploadThumb() {
        $file = $this->request->file('file');
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

        if ($info) {
            $result = [
                'code'     => 0,
                'msg'      => '上传成功',
                'filename' => '/public/uploads/' . str_replace('\\', '/', $info->getSaveName())
            ];
        } else {
            $result = [
                'code' => -1,
                'msg'  => $file->getError()
            ];
        }

        return json($result);
    }

更多详情：http://www.kancloud.cn/zhiqiang/helper