三步走
第一步: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值提交到控制器中的添加方法中就阔以了