tp3.2+layui ajax文件上传(直接上代码)

三步走

第一步:html代码

<div class="col-lg-6 uploadID">
    图片xxx
    <div>
        <input type="file" name="sfz_img" id="ulFont" required>
        <input type="hidden" name="sfzImg">  
        <img  id="ulFontImg">
    </div>
</div>
<div class="col-lg-6 uploadID ">
    图片xxx
    <div>
        <input type="file" name="sff_img" id="ulBack" required>
        <input type="hidden" name="sffImg">
        <img id="ulBackImg">
    </div>
</div>

第一个input是文件上传的file

第二个input是hidden,用于提交图片地址到控制器

第三个img是即时显示图片

第二步:js代码

<script src="__PUBLIC__/layui/layui.js"></script>
<script>
    var ajaxUrl = "{:U('member/Account/realAccount')}";
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#ulFont' //绑定元素
            ,url: "{:U('member/Account/upload')}" //上传接口
            ,data: {name:$("#ulFont").attr('name')}
            ,done: function(res){
                //上传完毕回调
//                console.log(res);
                $("#ulFont").next().next().attr('src',res.data.src); //给img赋予src值
                $("#ulFont").next().next().css({'height':'150px'});  //给img赋予高度
                $("#ulFont").next().val(res.data.src);  //给隐藏域赋予图片地址用于提交到控制器
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>

请参考layui官方文档:https://www.layui.com/doc/modules/upload.html

简要说明: elem:后面接的是input(file) 的id

url是控制器上传接口

data是额外上传的数据(根据需要添加)

第三步:控制器--方法

public function upload(){
//        dump(I('post.name')); die;
        $file_name = I('post.name');  //layui中data提交过来的数据
        $img = $_FILES[$file_name];
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize =     3145728 ;// 设置附件上传大小
        $upload->exts    =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->autoSub = true; // 开启子目录保存 并以日期（格式为Ymd）为子目录
        $upload->subName = array('date','Ymd');
        $upload->rootPath =     './Public/Uploads/'; // 设置附件上传根目录
        $upload->saveName = array('uniqid',''); // 设置附件上传（子）目录
        // 上传文件
        $info   =   $upload->uploadOne($img);
        if($info){  //返回格式必须是json  可以参考layui文档
            $res = [
                "code"=> 0,
                "msg"=> "上传成功",
                "data"=> ["src"=> "/Public/Uploads/".$info['savepath'].$info['savename']]  //图片地址返回给前端
            ];
            echo json_encode($res);
        }else{
            $res = [
                "code"=> -1,
                "msg"=> "上传失败",
                "data"=> ""
            ];
            echo json_encode($res);
        }

    }

然后,将前端所有的input值提交到控制器中的添加方法中就阔以了