thinkphp5 + layui单张图片和多张图片上传
浏览量:84
<!-- 单图上传 -->
<div class="layui-form-item">
<label class="layui-form-label"><span class="x-red">*</span>图片上传</label>
<div class="layui-input-block">
<!-- 获取上传后的图片名称，便于等会儿提交数据 -->
<input type="hidden" name="banner_path" id="banner_path">
<div class="layui-upload">
<a class="layui-btn" id="btn-img">上传图片</a> <span class="x-red" id="ups"></span>
<div class="layui-upload-list">
<img class="layui-upload-img" id="upload-img" style="width:800px;height:200px;">
</div>
</div>
</div>
</div>
<!-- 多图上传 -->
<div class="layui-form-item">
<label class="layui-form-label"><span class="x-red">*</span>图片上传</label>
<div class="layui-input-block">
<input type="text" name="article_img" id="article_img" class="layui-input">
<div class="layui-upload">
<a class="layui-btn" id="btn-img">上传图片</a> <span class="x-red" id="ups"></span>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="upload-img"></div>
</blockquote>
</div>
</div>
</div>
layui.use(['layer','form','upload'], function(){
var layer = layui.layer
,form = layui.form
,upload = layui.upload;
//普通图片上传
upload.render({
elem: '#btn-img',
url: "{:url('Image/addBanner')}",
data: {isAjax:'1',html:'yes'}, //额外参数
accept: 'images', // 允许上传的文件类型
size: 2048, //允许大小，最大2M
auto: true, // 自动上传,自动调用后台方法开始上传
before: function(obj){
$("#ups").text('正在上传……');
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#upload-img').attr('src', result); //图片链接（base64）
});
},done: function(res){
if(res.status == 1){
$("#ups").text('上传成功！'); //上传状态
//layer.msg('图片上传成功！',{icon:6});
$("#banner_path").val(res.info); //获取返回值，便于等会儿提交整个表单
}else{
layer.msg(res.info,{icon:5});
return false;
}
},error: function(){
layer.msg('上传失败，请重新上传',{icon:5});
}
});
//多图上传
var num = 0; //便于接收返回值
var img = []; //便于存储返回值
upload.render({
elem: '#btn-img',
url: "{:url('Image/addBanner')}",
data: {isAjax:'1',html:'yes'}, //额外参数
multiple: true, //开启多图上传这个是重点
accept: 'images', // 允许上传的文件类型
size: 2048, //允许大小，最大2M
auto: true, // 自动上传
before: function(obj){
$("#ups").text('正在上传……');
$('#upload-img').html('');
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#upload-img').append('<img src="'+result+'" alt="'+ file.name +'" class="layui-upload-img" style="width:100px;height:auto">'); //图片链接（base64）
});
},done: function(res){
num = num + 1; //每次进入等于遍历一次
if(res.status == 1){
//在控制台打印返回数据，这里可以看见每张图片的值都是返回回来了的，所以需要将所有值用上面的竖线拼接起来，便于表单传值到后台
console.log(res.info);
img[num-1] = res.info; //将返回的每一个值都存储起来
$("#ups").text('上传成功！');
$("#article_img").val(img.join('|')); //使用竖线链接，这个是关键
}else{
$("#ups").text(res.info);
layer.msg(res.info,{icon:5});
return false;
}
},error: function(){
$("#ups").text('上传失败，请重新上传！');
layer.msg('上传失败，请重新上传！',{icon:5});
}
});
});
//这里只截取了主要代码片段，此方法中我还定义了表单提交后的方法，所以前端使用了额外的参数进行区分，单图与多图均用此方法，只是多图上传的时候，避免出现同名的文件，需要重新定义一下文件名
public function addBnaner(){if(input('isAjax') == 1){ //异步上传图片
// 获取表单上传文件
$file = request()->file('file'); //layui默认的文件name 即为 file
if(empty($file)){
return json(['info'=>'请选择上传文件！','status'=>0]);
}
// 移动到框架应用根目录/public/upload/ 目录下，并修改文件名为时间戳
$info = $file->move(ROOT_PATH.'public'.DS.'upload'.DS.'image'.DS,time());
//下面两行即为多图上传的文件名重定义
//$filename = time().rand(10,100); //时间戳+随机数
//$info = $file->move(ROOT_PATH.'public'.DS.'upload'.DS.'article'.DS,$filename);
if($info){
return json(['info'=>$info->getSaveName(),'status'=>1]); //文件名称
}else{
return json(['info'=>'文件上传失败啦！','status'=>0]);
}
}
}
感谢支持与鼓励～