准備資料
下載layui
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片上傳</title>
<link rel="stylesheet" href="layui-v2.2.5/layui/css/layui.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上傳多張圖片</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多圖片上傳</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
預覽圖：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
<script src="layui-v2.2.5/layui/layui.js"></script>
<script src="layui-v2.2.5\layui\jquery-3.3.1.min.js"></script>
<script>
layui.use('upload', function () {
var upload = layui.upload;
//多圖片上傳
upload.render({
elem: '#test2',
url: 'imgdemo',
multiple: true,
before: function (obj) {
//預讀本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#demo2').append('<img src="' + result + '" alt="' + file.name +
'" class="layui-upload-img">')
});
},
done: function (res) {
//如果上傳失敗
if (res.code == 404) {
return layer.msg(res.msg);
}
//上傳成功
if (res.code == 1) {
return layer.msg(res.photo);
}
}
});
});
</script>
</body>
</html>
tp5 代碼：
public function imgdemo(Request $request){
//接收上傳的文件
$file = $this->request->file('file');
if(!empty($file)){
//圖片存的路徑
$imgUrl= ROOT_PATH . 'public' . DS . 'uploads'. '/' . date("Y/m/d");
// 移動到框架應用根目錄/public/uploads/ 目錄下
$info = $file->validate(['size'=>1048576,'ext'=>'jpg,png,gif'])->rule('uniqid')->move($imgUrl);
$error = $file->getError();
//驗證文件后綴后大小
if(!empty($error)){
dump($error);exit;
}
if($info){
// 成功上傳后 獲取上傳信息
//獲取圖片的名字
$imgName = $info->getFilename();
//獲取圖片的路徑
$photo=$imgUrl . "/" . $imgName;
}else{
// 上傳失敗獲取錯誤信息
$file->getError();
}
}else{
$photo = '';
}
if($photo !== ''){
return ['code'=>1,'msg'=>'成功','photo'=>$photo];
}else{
return ['code'=>404,'msg'=>'失敗'];
}
}
效果圖如下
服務端
注意（報錯可能是資源引用路徑錯誤）
