TP5.1+AJAX用一个input标签多图“上传和删除”，并数据列表点击图片查看

多图上传

前端部分：

<form class="layui-form" id="return_form" action="" style="margin-top: 20px;">
	<input type="hidden" name="user_id" value="{$data.user_id}">
	<div class="layui-form-item layui-form-text">
	  <label class="layui-form-label">回传备注</label>
	  <div class="layui-input-block">
	    <textarea style="width: 400px;" name="return_remarks" placeholder="请输入备注" class="layui-textarea"></textarea>
	  </div>
  	</div>
    <div class="layui-upload">
      <div class="layui-form-item">
        <label class="layui-form-label" style="margin-top: -4px;">客户回传</label>
        <div class="layui-input-block">
          <div class="layui-upload">
            <input type="file" id="file" name="file" multiple  class="file"></input>
          </div>   
        </div>
      </div>
    </div>
    <div class="layui-form-item" style="margin-left: 111px;">
      <button type="button" class="layui-btn" lay-submit="" lay-filter="return_add">开始上传</button>
    </div>
</form>

JS的AJAX部分：

//客户回传增加
form.on('submit(return_add)',function(data) {
    //formdata储存异步上传数据
    var formData = new FormData($("#return_form")[0]);
    //获取图片
    var files = $(".file")[0].files;
    if(files.length == 0){
        fail('上传的图片不能为空');
        return false
    }
    // //这一步很关键，直接传输files的话tp后台是不认的
    for(let i in files){
        formData.append("file"+i, files[i]);
    }
    $.ajax({
        type: "POST",
        url: "{:url('admin/admin/return_add')}",
        data:formData,
        //这两个设置项必填     防止ajax处理数据
        contentType: false,// 告诉jQuery不要去设置Content-Type请求头(发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。)
        processData: false,// 告诉jQuery不要去处理发送的数据(规定通过请求发送的数据是否转换为查询字符串。默认是 true。)
        //这两个设置项必填     防止ajax处理数据
        success: function(data){
            if(data.code==200){
                // alert('成功')
                //发异步，把数据提交给php
                layer.alert(data.msg, {icon: 1},function() {
                    //刷新当前页面
                    location.reload();
                });
            }else{
                layer.alert(data.msg, {icon: 2})
            }
        },
    });
    return false;
});

后端部分：

控制器部分：

/**
* @作者: 杨某人
 * @描述: 执行添加客户回传
 * @Date: 2021-04-19 14:15:31
 */    
public function return_add(){
    $input=input('post.');
    foreach($_FILES as $k => $v){
        $files[] = request()->file($k);
    }
    //移除数组下标为0
    unset($files[0]);
    $data=$this->AdminModel->return_add($input,$files);
    if($data==true){
        return json(['code'=>200,'msg'=>'增加成功']);
    }else{
        return json(['code'=>500,'msg'=>'增加失败']);
    }
}

model部分：

/**
 * @作者: 杨某人
 * @描述: 添加客户回传
 * @Date: 2021-04-19 14:15:31
 */    
public function return_add($input,$files){
    $return_remarks=db('return')->where('return_remarks',$input['return_remarks'])->field('return_remarks,picture')->find();
    $admin_id=session('id');
    /备注一样就修改     不一样就增加
    if($return_remarks){
        //文件上传
        foreach($files as $file){
            $infos[] = $file->move('./static/uploads');//把上传的文件移动到设置的地址
        }
        if($infos){
            //把\\替换成/
            foreach($infos as $info){
                $info = str_replace("\\","/",$info->getSaveName());//str_replace函数替换字符串中的一些字符（区分大小写）。
                $upload[] = "/static/uploads/".$info;//拼接文件完整地址
            }
            $upload=implode(',',$upload);
        }
        //文件上传
        $arr=array(
            "admin_id" => $admin_id,//操作员id
            "picture" => $return_remarks['picture'].','.$upload,//图片
        );
        $data=db('return')->where('return_remarks',$input['return_remarks'])->update($arr);
        if($data){
            writelogs(session('id'),$input['user_id'],'客户回传增加',1,'客户回传');//操作写入日志  （登陆者id,用户id,行为描述,操作状态,操作表)
            return true;
        }else{
            writelogs(session('id'),$input['user_id'],'客户回传增加',2,'客户回传');//操作写入日志  （登陆者id,用户id,行为描述,操作状态,操作表)
            return false;
        }
    }else{
        //文件上传
        foreach($files as $file){
            $infos[] = $file->move('./static/uploads');//把上传的文件移动到设置的地址
        }
        if($infos){
            //把\\替换成/
            foreach($infos as $info){
                $info = str_replace("\\","/",$info->getSaveName());//str_replace函数替换字符串中的一些字符（区分大小写）。
                $upload[] = "/static/uploads/".$info;//拼接文件完整地址
            }
            $upload=implode(',',$upload);
        }
        //文件上传
        $arr=array(
            "user_id" => $input['user_id'],//客户id
            "admin_id" => $admin_id,//操作员id
            "return_remarks" => $input['return_remarks'],//回传备注
            "picture" => $upload,//图片
            "add_time" => time(),//增加时间
        );
        $data=db('return')->insert($arr);
        if($data){
            writelogs(session('id'),$input['user_id'],'客户回传增加',1,'客户回传');//操作写入日志  （登陆者id,用户id,行为描述,操作状态,操作表)
            return true;
        }else{
            writelogs(session('id'),$input['user_id'],'客户回传增加',2,'客户回传');//操作写入日志  （登陆者id,用户id,行为描述,操作状态,操作表)
            return false;
        }
    }
}

多图删除

前端部分：

<td class="td-manage">
  <button title="删除" class="layui-btn" onclick="return_del(this,'{$v.return_id}','{$data.user_id}')" href="javascript:;"><i class="layui-icon">&#xe640;</i></button>
</td>

后端部分：

控制器部分：

/**
 * @作者: 杨某人
 * @描述: 客户回传删除
 * @Date: 2021-04-20 11:05:14
 */
public function return_del($return_id,$user_id){
    $data=$this->AdminModel->return_del($return_id,$user_id);
    if($data==true){
        return json(['code'=>200,'msg'=>'删除成功']);
    }else{
        return json(['code'=>500,'msg'=>'删除失败']);
    }
}

model部分：

/**
 * @作者: 杨某人
 * @描述: 客户回传删除
 * @Date: 2021-04-20 11:05:14
 */
public function return_del($return_id,$user_id){
    //删除本地文件
    $del=db('return')->where('return_id',$return_id)->field('picture')->find();
    if($del['picture']!=null){
        $del=$del['picture'];
        $del=explode(',',$del);
        foreach($del as $v){
            $dizhi=Env('root_path').'public';//Env('root_path')获取应用根目录
            //把/正斜线替换成\反斜线
            // $tihuan = str_replace("/","\\",$dizhi.$del);//str_replace函数替换字符串中的一些字符（区分大小写）。
            //把\反斜线替换成/正斜线
            $tihuan = str_replace("\\","/",$dizhi.$v);//str_replace函数替换字符串中的一些字符（区分大小写）。
            // halt($tihuan);
            if(file_exists($tihuan)){//file_exists() 函数检查文件或目录是否存在。
                unlink($tihuan);//删除文件
            }else{
                halt("文件未存在");
            }
        }
    }
    //删除本地文件
    $enclosure=db('return')->where('return_id',$return_id)->delete();
    if($enclosure){
        writelogs(session('id'),$user_id,'客户回传删除',1,'客户回传');//操作写入日志  （登陆者id,用户id,行为描述,操作状态,操作表)
        return true;
    }else{
        writelogs(session('id'),$user_id,'客户回传删除',2,'客户回传');//操作写入日志  （登陆者id,用户id,行为描述,操作状态,操作表)
        return false;
    }
}

数据列表查看图片

查看图片js：

//查看图片
$(function(){
  $('img').click(function(){
    //页面层-图片
    var qwe = $(this).attr('src');
    var img = '<img src="http://hbdh.com'+qwe+'">'
    layer.open({
      type: 1,
      closeBtn: 0,
      skin: 'layui-layer-nobg', //没有背景色
      shadeClose: true,
      type: 1,//Page层类型
            area: ['auto'],
            title: '查看图片',
            shade: 0.6 ,//遮罩透明度
            maxmin: true ,//允许全屏最小化
            anim: 2 ,//0-6的动画形式，-1不开启
            content: img
    });
  })
})