pbootcms之pbmod新增簡(jiǎn)單無限下載功能
時(shí)間：2021-10-05 訪問量：0
使用PBCMS的時(shí)候，我們?cè)谛略黾訑U(kuò)展字段的時(shí)候，比如說要增加附件下載，只能定義單個(gè)的下載字段。但是當(dāng)我們有用戶需要在某個(gè)詳情頁上有多個(gè)文件上傳并提供下載的話，就無法處理了。
但是PBMOD提供了擴(kuò)展的多圖上傳功能，我們只需要對(duì)他進(jìn)行稍作修改就可以實(shí)現(xiàn)無限下載了。
話不多說，直接說重點(diǎn)。
1：控制器中的ExtFieldController.php增加兩處代碼。
第130行左右，復(fù)制上面的多圖改成14，當(dāng)然，這個(gè)數(shù)字可以是其他數(shù)字，只要對(duì)應(yīng)即可。
第80行左右。也是復(fù)制上面的，將數(shù)字改成14。當(dāng)然，這個(gè)數(shù)字可以是其他數(shù)字，只要對(duì)應(yīng)即可。
2：視窗模板中的extfield.html中，60行左右。添加這個(gè)代碼。
{if($value->type==14)}下載功能{/if}127行左右，添加如下
<option value="14">下載功能</option>
243行左右，添加如下代碼：
<option value="14" {if([$extfield->type]==14)}selected{/if}>下載功能</option>通過上面兩步，功能實(shí)際上已經(jīng)完成。只是在添加文章的頁面中還不會(huì)顯示。所以接下來需要在添加文件中添加這個(gè)按鈕進(jìn)去。下面我們主要是做文章列表，單頁中就不講了，省略了，方法一樣。
3：打開文件：content.html,如果單頁模型也需要用的話，直接修改：single.html就可以了。方法完全一樣。
我們找到原來的多圖帶描述的那一段代碼，大概在500行左右。
{if($value->type==13)}
<!-- 多圖（帶描述） -->
<div class="layui-form-item">以這個(gè)開頭和IF結(jié)尾的。復(fù)制它并修改成以下方式。
{if($value->type==14)}
<!-- 下載按鈕 -->
<div class="layui-form-item">
<label class="layui-form-label">[value->description]</label>
<input type="hidden" name="[value->name]" id="pics_[value->name]" placeholder="" class="layui-input">
<button type="button" class="layui-btn uploadsfile layui-btn-primary" data-des="pics_[value->name]">
<i class="layui-icon"></i>新增下載
</button>
<div id="pics_[value->name]_box" class="pic addedit add_pics add_pics_desc downlist">
<dl></dl> <!-- 規(guī)避空內(nèi)容拖動(dòng)bug -->
</div>
<script type="text/javascript">
$("#pics_[value->name]_box").dragsort({
dragSelector: "dl",
dragBetween: false,
dragSelectorExclude: "input,textarea,dd",
dragEnd: saveOrder_[value->name],
placeHolderTemplate: "<dl class='placeHolder'><dt></dt></dl>"
});
function saveOrder_[value->name]() {
var data = $("#pics_[value->name]_box dl dt img").map(function() {
return $(this).data("url");
}).get();
};
</script>
</div>
{/if}這里面我們刪除了原來的圖片占位，因?yàn)樯蟼鞯氖俏募?，不?huì)有圖片，所以多余，然后為了方便控制其CSS樣式，所以我們添加了一個(gè) downlist的CSS樣式。方便晚一點(diǎn)我們重寫其顯示樣式。
然后我們?cè)?200行左右，同樣找到原來的代碼并修改。
{if($value->type==14)}
<!--下載 -->
<div class="layui-form-item">
<label class="layui-form-label">[value->description]</label>
<input type="hidden" name="[value->name]" id="pics_[value->name]" placeholder="" class="layui-input">
<button type="button" class="layui-btn uploadsfile layui-btn-primary" data-des="pics_[value->name]">
<i class="layui-icon"></i>新增下載
</button>
<div id="pics_[value->name]_box" class="pic addedit add_pics add_pics_desc downlist">
<dl></dl> <!-- 規(guī)避空內(nèi)容拖動(dòng)bug -->
{php}$name=$value->name; {/php}
{php}
if([$content]->$name){
$pics=unserialize([$content]->$name);
}else{
$pics = array();
}
foreach ($pics as $key=>$value) {
echo "<dl class='down'>
<p><input type='text' class='form-control input-sm' placeholder='下載地址' name='img_pics_".$name."_src[]' value='".$value[src]."' size='30' style='color:#999;'></p>
<p><input type='text' class='form-control input-sm' placeholder='下載注釋' name='img_pics_".$name."_alt[]' value='".$value[alt]."' size='30'></p>
<p><textarea class='form-control input-sm' placeholder='下載描述' name='img_pics_".$name."_desc[]'>".$value[desc]."</textarea></p>
<dd>刪除</dd>
</dl>";
}
{/php}
</div>
<script type="text/javascript">
$("#pics_{php}echo $name;{/php}_box").dragsort({
dragSelector: "dl",
dragBetween: false,
dragSelectorExclude: "input,textarea,dd",
dragEnd: saveOrder_{php}echo $name;{/php},
placeHolderTemplate: "<dl class='placeHolder'><dt></dt></dl>"
});
function saveOrder_{php}echo $name;{/php}() {
var data = $("#pics_{php}echo $name;{/php}_box dl dt img").map(function() {
return $(this).data("url");
}).get();
};
</script>
</div>
{/if}4：完成上面的步驟，效果我們就已經(jīng)實(shí)現(xiàn)了。但是樣式并不好看。所以再重寫一個(gè)CSS樣式。
引入CSS或者直接在html中寫入以下樣式：
/*下載樣式*/
.downlist dl{
width: 90%!important;
border:none;
background: #f1f1f1;
margin-bottom: 5px;
padding-top:2px;
padding-bottom: 1px;
padding-left:2px;
}
.downlist dl dt{
display: none;
}
.downlist dl p{
width: 34%;
margin-right: 2px;
float: left;
}
.downlist dl p:nth-child(2){
width: 20%;
}
.downlist dl p textarea{
padding:0;
min-height: 41px;
border:1px solid #ddd;
}
.downlist dl p input{
padding:5px 10px 0px;;
border:1px solid #ddd;
min-height: 30px;
height: 42px;
}
5：然后我們測(cè)試，發(fā)現(xiàn)上傳的時(shí)候，識(shí)別的是圖片，因?yàn)槲覀儚?fù)制是的原來代碼是上傳圖片用的，所以我們需要改成上傳文件功能。
細(xì)心的朋友會(huì)發(fā)現(xiàn)，我們提供的代碼和原來上面上傳圖片的代碼有一點(diǎn)區(qū)別是
原來這個(gè)位置用的是：uploads,而我們選擇使用了：uploadsfile,這個(gè)名字是自己命名的。你可以命名為任何名字。
然后我們需要打開JS下的：mylayui.js
復(fù)制以這個(gè)開頭的那一段代碼并修改
//執(zhí)行多圖片上傳實(shí)例@mk
var files = '';
var html = '';
var uploadsInst = upload.render({，修改成：
//執(zhí)行下載文件上傳
var files = '';
var html = '';
var uploadsInst = upload.render({
elem: '.uploadsfile' //綁定元素
,
url: uploadurl //上傳接口
,
field: 'upload' //字段名稱
,
multiple: true //多文件上傳
,
accept: 'file' //接收文件類型 images（圖片）、file（所有文件）、video（視頻）、audio（音頻）
,
acceptMime: 'file/*',
before: function (obj) {
//判斷是否需要加水印
if ($(this.item).hasClass('watermark')) {
uploadsInst.config.url = uploadurl + '/watermark/1'; //改變URL
}
layer.load(); //上傳loading
},
done: function (res) {
if (res.code == 1) {
if (files) {
files += ',' + res.data[0];
} else {
files += res.data[0];
}
var item = this.item;
var pics_name = $(item).data('des');
console.log(res);
html += "<dl><p><input type='text' class='form-control input-sm' placeholder='下載地址' name='img_" + pics_name + "_src[]' value='" + res.data[0] + "' size='30' style='color:#999;'></p><p><input type='text' class='form-control input-sm' placeholder='下載注釋' name='img_" + pics_name + "_alt[]' value='" + res.data[1] + "' size='30'></p><p style='display:none;'><textarea class='form-control' placeholder='下載描述' name='img_" + pics_name + "_desc[]'></textarea></p><dd>刪除</dd></dl>";
} else {
layer.msg('有文件上傳失敗：' + res.data);
}
},
allDone: function (obj) {
var item = this.item;
var des = $(item).data('des');
layer.closeAll('loading'); //關(guān)閉loading
if (files != '') {
if ($('#' + des).val()) {
$('#' + des).val($('#' + des).val() + ',' + files);
} else {
$('#' + des).val(files);
}
$('#' + des + '_box').append(html);
layer.msg('成功上傳' + obj.successful + '個(gè)文件！');
files = '';
html = '';
} else {
layer.msg('全部上傳失敗！');
}
},
error: function () {
layer.closeAll('loading'); //關(guān)閉loading
layer.msg('上傳發(fā)生錯(cuò)誤！');
}
});至此，基本上大功告成，你可以試一下。
