本章节主要讲解如果灵活运用layui和thinkphp5进行无刷新图片上传 #### 1.上传接口书写 1.建立一个Upliad.php上传控制器 2.在控制器下首先建立一个受保护的(protected)的_initialize方法，在这个方法中要进行验证用户是否进行登陆，如果没有进行登陆，需要跳转到登录页面，如果有登录就执行下面的上传方法 3.在控制器建立上传方法 业务逻辑如下： 1. 获取表单上传文件 ` $file = $request->file('file');` 2. .移动到框架应用根目录/public/uploads/ 目录下 ~~~ $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'); ~~~ 3 .返回上传后的信息。无论是成功还是失败都需要返回信息，返回格式必须如下格式 ~~~ { "code": 0 ,"msg": "" ,"data": { "src": "http://cdn.abc.com/123.jpg" } } ~~~ # 详细代码：[Source Code](上传接口.md) #### 2.视图设计 1. 导入的js和css文件 2. html代码，添加一个上传input `<input type="file" name="file" class="layui-upload-file">` 3. js代码的实现 * 加载upload模块 * 详细参数 | | | | | --- | --- | --- | | 参数 | 类型 | 描述 | | elem | string | 指定元素的选择器，默认直接查找class为layui-upload-file的元素 | |url |string |上传文件的接口| |method |string |设置http类型，如：post、get。默认post。也可以直接在input设置lay-method="get"来取代。| |before| function| 执行上传前的回调| |success| function| 上传成功后的回调| |type| string |设定上传的文件类型，也可以直接在input设置lay-type=""来取代（详细见下文）。| |ext |string |自定义可支持的文件扩展名，也可以直接在input设置lay-ext=""来取代（详细见下文）。| |unwrap| boolean |是否不改变input的样式风格。默认false| * 官网案例说明 我们上传文件是借助type为file的input标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。下面就是一个非常普通的input，它可以出现你页面的任何位置。 ~~~ <input type="file" name="file（可随便定义）" class="layui-upload-file"> ~~~ 另外class="layui-upload-file"不是必须的，她只是会让你的input短暂性隐藏，并且在调用upload方法时不用设置elem。要使得这个input能正常地用起来，你只需要执行下述方法： ~~~ layui.upload({ url: '上传接口url' ,success: function(res){ console.log(res); //上传成功返回值，必须为json格式 } }); ~~~ 实现异步上传官网说明地址:http://www.layui.com/doc/modules/upload.html # 详细代码：[Source Code](视图.md)