tp5使用layui實(shí)現(xiàn)多個(gè)圖片上傳(帶附件選擇)的方法實(shí)例
更新時(shí)間：2021年10月26日 11:19:59 作者：bilichen006
在以前項(xiàng)目中遇到有上傳圖片都是用 web Uploader插件上傳,因?yàn)槲椰F(xiàn)在項(xiàng)目都在使用 layui 所以今天趁著有時(shí)間寫一個(gè)tp5結(jié)合layui上傳圖片的示例，感興趣的可以了解一下
tp5使用layui實(shí)現(xiàn)多個(gè)圖片上傳（帶附件選擇），如何加載layui在此不詳細(xì)說明，有需要可以百度
html代碼，主要處理都是在jq中，完成方法全部原創(chuàng)，也許不是最簡單的，但也能實(shí)現(xiàn)效果
{include file="public/header" /}
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首頁</a>
<a href="">多選圖片列表</a>
<a>
<cite>添加多選圖片</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" rel="external nofollow" title="刷新">
<i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
<div class="top" style="font-size: 14px">添加多選圖片</div>
<div style="width:100%;height: 5px;background-color: #077ee3;margin-top: 5px;margin-bottom: 20px"></div>
<form action="" enctype="multipart/form-data" method="post" role="form" onSubmit="return check()">
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload_img">多圖片上傳</button>
<a class="layui-btn layui-btn-sm layui-btn-normal" onclick="selectImg('選擇圖片','{:url("selectImg")}','1000','600')" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<i class="layui-icon"></i>選擇圖片
</a>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
預(yù)覽圖：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
<input name="url" class="imgInput" type="hidden">
<!--<button type="button" class="layui-btn" onclick="test()">-->
<!--測試-->
<!--</button>-->
<div class="layui-form-item">
<label for="" class="layui-form-label">
</label>
<button type="submit" class="layui-btn btnAdd" lay-filter="add" lay-submit="">
增加
</button>
</div>
</form>
</div>
<style>
.imgInput{
width: 600px;
height: 35px;
}
.layui-form-label{
font-size: 14px;
width: 100px;
}
select{
width: 500px;
}
#pre_img{
display: none;
padding: 5px;
border: 1px solid #999;
}
#demo2{
display: flex;
display: -webkit-flex;
/*justify-content: space-between;*/
flex-direction: row;
flex-wrap: wrap;
}
.img{
width: 150px;
height: 150px;
}
.btnAdd{
margin-top: 40px;
}
.img_item{
display: flex;
flex-direction: column;
text-align: center;
margin-right: 20px;
margin-bottom: 20px;
}
.delimg{
text-align: center;
line-height: 20px;
width: 160px;
height: 20px;
background-color: red;
color: white;
margin-top: 5px;
}
</style>
<script>
function check(){
$('input[name="url"]').val(urlList);
var str = $('input[name="url"]').val();
if(str ==''|| str==null || str=='undefined'){
alert("請選擇圖片");
return false;
}
}
function selectImgGo($url,$urlWeb){
var index = 0;
if(urlList.length>0){
index = urlList.length;
}
var img = $([
'<div class="img_item">',
'<div class="img" style="overflow:hidden;">',
'<img src="'+ $urlWeb +'" alt="' + $url +'" class="layui-upload-img" style="max-width:150px;"></div>',
'<div class="delimg" id="delimg" onclick=delImg("'+ index +'") href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="cursor:pointer ">刪除</div></div>'
].join(''));
$('#demo2').append(img);
urlList.push($url);
imgList.push($urlWeb);
}
var imgList = [];
var urlList = [];
layui.use(['upload','jquery'],function () {
$ = layui.jquery;
var upload = layui.upload;
//多圖片上傳
upload.render({
elem: '#upload_img'
,url:"{:url('share/upload_img')}" //上傳接口
,multiple: true
,before: function(obj){
//預(yù)讀本地文件示例，不支持ie8
obj.preview(function(index, file, result){
})
}
,done: function(res){
var index0 = 0;
if(urlList.length>0){
index0 = urlList.length;
}
var img0 = $([
'<div class="img_item">',
'<div class="img" style="overflow:hidden;">',
'<img src="'+ res.msg +'" class="layui-upload-img" style="max-width:150px;"></div>',
'<div class="delimg" id="delimg" onclick=delImg("'+ index0 +'") href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="cursor:pointer ">刪除</div></div>'
].join(''));
$('#demo2').append(img0);
urlList.push(res.url);
imgList.push(res.msg);
}
,error: function(){
// layer.close(layer.msg());//關(guān)閉上傳提示窗口
//請求異常回調(diào)
}
});
});
function delImg(index){
urlList.splice(index,1);
imgList.splice(index,1);
$('#demo2').empty();
for (var i=0;i<imgList.length;i++){
var img0 = $([
'<div class="img_item">',
'<div class="img" style="overflow:hidden;">',
'<img src="'+ imgList[i] +'" class="layui-upload-img" style="max-width:150px;"></div>',
'<div class="delimg" id="delimg" onclick=delImg("'+ i +'") href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="cursor:pointer ">刪除</div></div>'
].join(''));
$('#demo2').append(img0);
}
}
/*選擇圖片*/
function selectImg(title,url,w,h){
x_admin_show(title,url,w,h);
}
</script>
</body>
</html>
php代碼
//php layui圖片上傳
public function upload_img(){
$file = request()->file('file'); // 獲取上傳的文件
if($file==null){
exit(json_encode(array('code'=>1,'msg'=>'未上傳圖片')));
}else{
//5、對上傳文件做出條件限制（類型，大小等）
$map = [
'ext'=>'jpg,png,gif,jpeg',//后輟名
'size'=>320000000,//最大3M
];
//6、對上傳的文件進(jìn)行較驗(yàn)，如果合格就進(jìn)行轉(zhuǎn)移到預(yù)定設(shè)定好的public/uploads目錄下
//返回保存的文件信息info，包括文件名和大小等數(shù)據(jù)
$info = $file->validate($map)->move(ROOT_PATH . 'public/uploads/img');
//獲取圖片寬高
list( $width , $height , $type , $attr ) = getimagesize ($info->getPathName());
if(is_null($info)){
$this->error($info->getError());
}
$img = str_replace('\\','/',$info->getSaveName());
//保存附件
$annexData['filesize'] = $info->getInfo()['size'];
$annexData['mimetype'] = $info->getInfo()['type'];
$annexData['filename'] = $info->getInfo()['name'];
$annexData['imagewidth'] = $width;
$annexData['imageheight'] = $height;
$annexData['type'] = 'img';
$annexData['url'] = $img;
AAnnexModel::create($annexData);
$img = constant("URL")."/uploads/img/".$img;
exit(json_encode(array('code'=>0,'msg'=>$img,'url'=>$annexData['url'])));
}
}
//多選圖片添加頁面
public function addImages(){
if($this->request->isPost()){
//2、獲取提交過來的數(shù)據(jù)，最后true參數(shù)，表示連上傳文件一起獲取
$data = $this->request->param(true);
$res = AImagesModel::create($data);
if(is_null($res)){
$this->error('文件添加失敗');
}else{
$this->success('文件添加成功...',url('imagesList'));
}
return;
}
return $this->fetch('images_add');
}
到此這篇關(guān)于tp5使用layui實(shí)現(xiàn)多個(gè)圖片上傳(帶附件選擇)的方法實(shí)例的文章就介紹到這了,更多相關(guān)tp5 多圖片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
php實(shí)現(xiàn)學(xué)生管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了php學(xué)生管理系統(tǒng)的具體實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
thinkphp 框架數(shù)據(jù)庫切換實(shí)現(xiàn)方法分析
這篇文章主要介紹了thinkphp 框架數(shù)據(jù)庫切換實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了thinkphp 框架數(shù)據(jù)庫切換實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
這篇文章主要介紹了19個(gè)Android常用工具類匯總,需要的朋友可以參考下2014-12-12
CodeIgniter框架鉤子機(jī)制實(shí)現(xiàn)方法【hooks類】
這篇文章主要介紹了CodeIgniter框架鉤子機(jī)制實(shí)現(xiàn)方法,結(jié)合具體的hooks類文件描述了鉤子機(jī)制的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
PHP指定截取字符串中的中英文或數(shù)字字符的實(shí)例分享
這篇文章主要介紹了PHP指定截取字符串中的中英文或數(shù)字字符的實(shí)例,還附帶介紹了過濾字符串中空格的方法,需要的朋友可以參考下2016-03-03
這篇文章介紹了對淘寶URL中ID提取的PHP代碼，有需要的朋友可以參考一下2013-09-09
這篇文章主要介紹了關(guān)于在LNMP上部署laravel以及xhprof安裝使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
PHP實(shí)現(xiàn)WebService的簡單示例和實(shí)現(xiàn)步驟
這篇文章主要介紹了PHP實(shí)現(xiàn)WebService的簡單示例和實(shí)現(xiàn)步驟,本文直接給出示例代碼并分步驟講解,需要的朋友可以參考下2015-03-03
Bootstrap+PHP實(shí)現(xiàn)多圖上傳功能實(shí)例詳解
這篇文章主要介紹了Bootstrap+PHP實(shí)現(xiàn)多圖上傳功能實(shí)例詳解,本文圖片加實(shí)例相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-04-04
PHP隨機(jī)生成18位不重復(fù)的訂單號代碼實(shí)例
這篇文章主要介紹了PHP隨機(jī)生成18位不重復(fù)的訂單號代碼實(shí)例，代碼很簡單但是很實(shí)用，有需要的同學(xué)可以參考下2021-03-03