多图上传

标签：上传文件   div   test   cti   分享   jpg   错误   pen   tip   

tp5中   Product.php

// --------------------多图上传-----------------------------
var arr = ‘‘;
layui.use(‘upload‘, function() {
var $ = layui.jquery,
upload = layui.upload;
//多图上传
upload.render({
elem: ‘#test2‘,
url: "{:url(‘Base/Upload‘)}",
multiple: true,
before: function(obj) {
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result) {
$(‘#demo2‘).append(‘<img src="‘ + result + ‘" alt="‘ + file.name + ‘" class="layui-upload-img" style="width:100px;height:100px;">‘)
});
},
done: function(res) {
arr += res.url + ‘,‘;
$(‘.img‘).val(arr);
//如果上传失败
if (res.code > 0) {
return layer.msg(‘上传失败‘);
}
return layer.msg(‘上传成功‘);
//上传完毕
}
});
})

//多图上传
public function upload() {
// 获取表单上传文件 例如上传了001.jpg
$file = request() -> file(‘file‘);
$info = $file -> move(‘../uploads‘);
if ($info) {
$dz=$info -> getSaveName();
return json([‘url‘ =>‘\items\uploads\\‘ .$dz]);
} else {
// 上传失败获取错误信息
echo $file -> getError();
}
}

---------------------------------html---------------------------------

<div class="layui-upload" style="width:830px;margin-left:185px;margin-top:20px;">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="demo2"></div>
图片路径：<input style="width:800px;" type="text" class="img" disabled=‘disabled‘ name="picture" value="" />
</blockquote>
<button type="button" class="layui-btn" id="test2">多图片上传</button>
</div>

多图上传

标签：上传文件   div   test   cti   分享   jpg   错误   pen   tip   

原文地址：https://www.cnblogs.com/ysboke/p/10283649.html