pbootcms留言上傳圖片并在后臺(tái)顯示出來
時(shí)間：2020-06-30 訪問量：0
大家好，這里是深圳黑馬視覺品牌網(wǎng)站建設(shè)。我們專注于深圳龍華網(wǎng)站建設(shè)開發(fā)服務(wù)，如果你的需要，歡迎聯(lián)系我們。
pbootcms在前幾天升級(jí)到了X3.0版本，目前還在測(cè)試中。
雖然會(huì)員中心沒有太大的變化。但是卻給我們了一個(gè)留言上傳圖片的解決方案。
歡迎隨便轉(zhuǎn)載，不需要注明來源和出處，我們的目的是讓知識(shí)和內(nèi)容得到分享和傳播。
pbootcms留言怎么上傳圖片呢？
我們打開默認(rèn)的：message.html
<div class="form-group"> <label for="hidden">圖片：</label> <input type="text" name="pic" id="pic" class="headpic" placeholder="請(qǐng)上傳圖片" > <buttom class="btn btn-success upload" data-target=".headpic" >上傳</buttom> </div>
我們新增這樣一段代碼，其中：pic為后臺(tái)自定義的圖片字段，你也可以另外取名。
不要以為這樣就完事了，你就想太多了。
上傳代碼有了，但是上傳不。所以我們要引入一個(gè)文件，這個(gè)文件是3X新增加的：
如果是用AJAX提交數(shù)據(jù)的話，記得在JS中添加喲：
這樣的話，前端就可以了喲。但是不要以為這樣就可以了喲，我們來看看后臺(tái)。
圖片是一堆字符串，太不人性化了吧。不要急，龍網(wǎng)網(wǎng)站建設(shè)肯定是會(huì)幫你出主意解決的。
我們打開后臺(tái)的模板文件：message.html,記住，是后臺(tái)的模板文件。
大約30行左右這里，我們可以看到，這里是循環(huán)輸入留言字段的。稍作修改一下吧。
我們把TD那一段修改成：
<td >
<script>
var Cts = "[value->$field]";
if(Cts.indexOf("/static/") >= 0 ) {
document.write( "<img src="+Cts +">");
} else
{
document.write(Cts);
}
</script>
</td>
2020-10-30日更新： 當(dāng)后綴為JPG或者PNG的時(shí)候，顯示圖片，當(dāng)后綴為XLS或者DOC文檔的時(shí)候進(jìn)行下載，其他字段直接顯示。
<script>
var Cts = "[value->$field]";
if( (Cts.indexOf("jpg") >= 0)||(Cts.indexOf("png") >= 0) ) {
document.write( "<img src="+Cts+">");
} else if( (Cts.indexOf("xls") >= 0)||(Cts.indexOf("doc") >= 0) )
{
document.write("<a href='"+Cts+"' target='_blank'>"+Cts+"</a>");
}else {
document.write(Cts);
}
</script>
再刷新后臺(tái)看看：玩美
