- class="layui-fluid">
- class="layui-row">
- class="layui-form">
- class="layui-form-item">
- for="username" class="layui-form-label">
class="x-red">*> 轮播图
- class="layui-input-inline">
- type="button" class="layui-btn" id="add">
class="layui-icon">> 上传图片
class="layui-form-mid layui-word-aux">
class="x-red">* 图片格式 1920*450
- class="layui-form-item">
- src=""alt="" id="img" style="width:100%;max-height:450px;">
- type="hidden" name="banner" id="banner" value="">
- class="layui-form-item">
- for="L_repass" class="layui-form-label">
- class="layui-btn" lay-filter="add" lay-submit="">
增加
前台代码, 创建一个 hideen 的隐藏 input 框来接收上传完成的图片路径当点击上传的时候把图片路径插入数据库
layui 代码实例
- // 执行实例
- // 执行图片上传实例
- var uploadInst = upload.render({
- elem: '#add' // 绑定元素
- ,url: '{:url('uploads')}' // 上传接口
- ,size: 2048
- ,choose: function(obj){
- // 预读本地文件示例, 不支持 ie8
- obj.preview(function(index, file, result){
- $('#img').attr('src', result); // 图片链接 (base64) 直接将图片地址赋值给 img 的 src 属性
- });
- // 上传图片时吧旧图片的目录传过去删除
- this.data={'id':$("#banner").val()};
- },done: function(res){
- // 赋值新的图片名
- $("#banner").val(res.filename);
- // 上传完毕回调
- // console.log(res);
- if(res.code==1){
- return layer.msg('图片上传成功, 请确认增加');
- }else{
- return layer.msg('图片上传失败, 请刷新后重试');
- }
- }
- ,error: function(e){
- // 请求异常回调
- }
- });
tp 图片接口代码
- /**
- * [uploads 上传图片接口]
- * @return [type] [图片名]
- */
- public function uploads(){
- $id = input('id');
- $file = request()->file('file');
- // 移动到框架应用根目录 / public/uploads/ 目录下
- if($file){
- // 有图片上传先删除之前的图片
- // 获取上个图片路径
- $dir=ROOT_PATH . 'public/uploads/'.$id;
- // 如果图片存在则进行删除
- if(file_exists($dir)){
- @unlink($dir);
- }
- // 上传新的图片
- $info = $this->upload($file);;
- $result=[
- 'code'=>1,
- 'msg'=>'上传成功',
- 'filename'=>str_replace('\\', '/',$info)
- ];
- return json_encode($result);
- }else{
- return false;
- }
- }
方法里的 id 是如果用户点了第二次上传片, 那么就会把第一张上传了的图片执行删除处理, 减少服务器空间.
希望这边文章对你们有用
来源: http://www.bubuko.com/infodetail-3201575.html