[TOC]
## 知識點
> 1、信息增加編輯鏈接帶參數
2、模板中加載默認值
3、百度webuploader編輯加載默認圖片
4、轉義字符（\）的轉義
$v = str_replace("\/","\\",$v);
5、多文件上傳bootstrap-fileinput
6、保存編輯
7、上傳路徑規劃
## 問題解決
> 1、SQLSTATE[42S02]: Base table or view not found: 1146 Table 'thinkphp5.tp_' doesn't exist
原因：傳參的問題，參數錯誤，導致查詢不到相關信息。如內容ID，還是分類catid，要確認清楚。
> 功能實現
## 一、信息增加編輯鏈接帶參數
### 1、編輯鏈接
編輯鏈接要在控制器中添加，這個與datatables插件有關系
~~~
public function getDataTables($id = 0) {
$lists[$key]['operate'] = "<a href='". url('edit',['id'=>$value['id'], 'catid'=>$value['catid']]) ."' title='編輯' target='_parent'><i class='fa fa-edit text-navy'></i></a>
<a name='delete' href='". url('delete',['id'=>$value['id'], 'catid'=>$value['catid']]) ."' title='刪除'><i class='fa fa-trash-o text-navy'></i></a>";
}
~~~
備注：target='_parent' 這個是在父窗口中打開
參數：信息ID和分類ID
### 2、控制器edit操作
思路：首先顯示字段；其次加載默認數據
關鍵：$value['realvalue'] = $article[$field];（組合數據）
~~~
//編輯功能
public function edit( $catid= 0, $id = 0) {
if(request()->isPost()) {
$content = new ContentModel;
if($content->editContent(input('post.'))) {
return success('信息編輯成功!',url('index'));
} else {
return error('信息編輯失敗!');
}
}else {
//獲取數據
$tablename = getModInfoById($catid,'tablename');
$article = Db::name($tablename)->where('id',$id)->find();
//根據分類ID獲取模型ID
$modelid = getModInfoById($catid,'id');
$modelsFieldArray = Db::name('models_field')->where('modelid',$modelid)->order('sort')->select();
foreach ($modelsFieldArray as $value) {
//字段名
$field = $value['field'];
//字段類型
$func = $value['formtype'];
$value['realvalue'] = $article[$field];
//判斷函數是否存在
if(function_exists($func)){
//獲取表單HTML代碼
$form = $func($value);
if($form != ''){
$info[$field] = array(
'name' => $value['name'],
'form' => $form,
'formtype' => $value['formtype']
);
}
}
}
$this->assign('forminfos',$info);
//分類名稱
$catname = getCatInfoById($catid,'catname');
$this->assign('catname',$catname);
return view();
}
}
~~~
### 3、模板
edit模板與add類似，這里不再顯示出來
## 二、模板中加載默認值
思路：每個字段就是個函數，函數返回表單信息；控制器中分配真實數據；判斷真實數據是否為空，為空則用默認數據
關鍵：$value = is_null($fieldinfo['realvalue']) ? $setting['defaultvalue'] : $fieldinfo['realvalue'];
~~~
1、text
$value = is_null($fieldinfo['realvalue']) ? $setting['defaultvalue'] : $fieldinfo['realvalue'];
<input id="info_$field" name="info[$field]" type="$type" class="form-control" value="$value" />
2、textarea
$value = is_null($fieldinfo['realvalue']) ? $setting['defaultvalue'] : $fieldinfo['realvalue'];
<textarea type="text" id="info_$field" name="info[$field]" class="form-control" style="height:$height">$value</textarea>
3、number
$value = is_null($fieldinfo['realvalue']) ? $setting['defaultvalue'] : $fieldinfo['realvalue'];
<input id="info_$field" name="info[$field]" type="type" class="form-control" value="$value" />
4、datetime
$date = is_null($fieldinfo['realvalue']) ? date('Y-m-d') : $fieldinfo['realvalue'];
$datetime = is_null($fieldinfo['realvalue']) ? date('Y-m-d H:i:s') : $fieldinfo['realvalue'];
<input class="form-control layer-date" name="info[$field]" value="$date" onclick="laydate({format: 'YYYY-MM-DD'})">
<input class="form-control layer-date" name="info[$field]" value="$datetime" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
5、image
$value = is_null($fieldinfo['realvalue']) ? '' : $fieldinfo['realvalue'];
<input id="info_$field" name="info[$field]" class="input-large form-control" type="text" value="$value">
6、downfile
$value = is_null($fieldinfo['realvalue']) ? '' : $fieldinfo['realvalue'];
<input id="info_$field" name="info[$field]" class="input-large form-control" type="text" value="$value">
7、editor
$value = is_null($fieldinfo['realvalue']) ? $setting['defaultvalue'] : $fieldinfo['realvalue'];
8、box
$defaultvalue = is_null($fieldinfo['realvalue']) ? $setting['defaultvalue'] : $fieldinfo['realvalue']; // 考慮多值情況
9、images
$value = is_null($fieldinfo['realvalue']) ? '' : $fieldinfo['realvalue'];
見三、百度webuploader編輯加載默認圖片
10、downfiles
$value = is_null($fieldinfo['realvalue']) ? '' : $fieldinfo['realvalue'];
~~~
## 三、百度webuploader編輯加載默認圖片
### （一）靜態編輯
#### 1、多圖片靜態html
新增樣式：queueListSuccess
~~~
<div id="uploader-list-container" class="uploader-list-container">
<div class="queueListSuccess" style="margin:20px">
<ul class="filelist">
<li id="WU_FILE_XXX" class="state-complete" studyfox_img="20170423\\042be1ff5366d878ae96c80bd55a1f82.jpg">
<p class="imgWrap"><img src="__PUBLIC__/uploads/20170423/042be1ff5366d878ae96c80bd55a1f82.jpg" width="110" height="110"></p>
<div class="file-panel" style="height: 0px;"><span class="cancel">刪除</span></div>
<span class="success"></span>
</li>
<li id="WU_FILE_YYY" class="state-complete" studyfox_img="20170423\\e38e95c1269e323b2c44f46448c8d06f.jpg">
<p class="imgWrap"><img src="__PUBLIC__/uploads/20170423/e38e95c1269e323b2c44f46448c8d06f.jpg" width="110" height="110"></p>
<div class="file-panel" style="height: 0px;"><span class="cancel">刪除</span></div>
<span class="success"></span>
</li>
</ul>
</div>
</div>
~~~
以上代碼只能在信息編輯時候才顯示出來，新增內容時不顯示以上代碼。
#### 2、js刪除
~~~
//刪除原圖片
$(".cancel").click(function(){
var img_src = $(this).parent().parent().attr('studyfox_img');
var id = $(this).parent().parent().attr('id');
//后臺刪除圖片
$.ajax({
url: '$delete_url',
type: 'POST',
data: {'img': img_src},
success: function(result, textStatus){
//圖片刪除成功后移除文本框圖片信息，三種情況 ,號位置在前 后 或沒有,號
var images_value = $('#info_$field').val();//隱藏文本框的值
images_value = images_value.replace(img_src+',', '').replace(','+img_src, '').replace(img_src, ''); //替換,號在右邊;左邊;直接替換
//重新賦值
$('#info_$field').val(images_value);
//view的銷毀
var li = $('#'+id);
delete percentages[ id ];
updateTotalProgress();
li.off().find('.file-panel').off().end().remove();
//刪除所有圖片之后銷毀外框
if(images_value==''){
$("#uploader-list-container").remove();
}
},
error: function(XMLHttpRequest, textStatus){
layer.alert('刪除失敗!', {icon:2});
}
});
});
~~~
#### 3、淡入淡出
~~~
var topli = $(".cancel").parent().parent();
topli.on( 'mouseenter', function() {
$(this).children('.file-panel').stop().animate({height: 30});
});
topli.on( 'mouseleave', function() {
$(this).children('.file-panel').stop().animate({height: 0});
});
~~~
### （二）動態編輯
#### 1、判斷是編輯還是新增
~~~
$public = config("view_replace_str.__PUBLIC__");
$value = is_null($fieldinfo['realvalue']) ? '' : $fieldinfo['realvalue'];
if($value!='') {
$values = explode(',',$value);
$str = '';
foreach ($values as $key => $v) {
$num = rand(1000,9999);
$v = str_replace("\/","\\",$v);
$str .= <<<EOF
<li id="WU_FILE_$num" class="state-complete" studyfox_img="$v">
<p class="imgWrap"><img src="$public/uploads/$v" width="110" height="110"></p>
<div class="file-panel" style="height: 0px;"><span class="cancel">刪除</span></div>
<span class="success"></span>
</li>
EOF;
}
$values = <<<EOF
<div id="uploader-list-container" class="uploader-list-container">
<div class="queueListSuccess" style="margin:20px">
<ul class="filelist">
$str
</ul>
</div>
</div>
EOF;
}else{
$values = '';
}
$str = <<<EOF
<input type="text" id="info_$field" name="info[$field]" class="input-large form-control" value="$value">
$values //妙哉！妙哉！妙哉！
<div class="uploader-list-container">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker-2"></div>
<p>或將圖片拖到這里，單次最多可選 $maxnumber 張</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
<div class="info"></div>
<div class="btns">
<div id="filePicker2"></div>
<div class="uploadBtn">開始上傳</div>
</div>
</div>
</div>
<script src="__ADMIN__/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" >
……
</javascript" >
EOF;
return $str;
~~~
#### 2、轉義字符（\）的轉義
$v = str_replace("\/","\\",$v);
具體見第四點
## 四、轉義字符（\）的轉義
參考網址：轉義序列(反斜線)
http://php.net/manual/zh/regexp.reference.escape.php
反斜線有多種用法。首先，如果緊接著是一個非字母數字字符，表明取消 該字符所代表的特殊涵義。這種將反斜線作為轉義字符的用法在字符類 內部和外部都可用。
比如，如果你希望匹配一個 "*" 字符，就需要在模式中寫為 "\*"。 這適用于一個字符在不進行轉義會有特殊含義的情況下。
但是， 對于非數字字母的字符，總是在需要其進行原文匹配的時候在它前面增加一個反斜線， 來聲明它代表自己，這是安全的。
如果要匹配一個反斜線，那么在模式中使用 ”\\”。
$v = str_replace("\/","\\",$v);
## 五、多文件上傳bootstrap-fileinput
思路：參照多圖片上傳
### （一）靜態刪除
#### 1、靜態html
~~~
<div id="file-input" class="file-input">
<div class="file-preview">
<div class=" file-drop-zone">
<div class="file-preview-thumbnails">
<div class="file-preview-frame krajee-default kv-preview-thumb file-preview-success" id="uploaded-XXX" data-fileindex="-1" data-template="rar" title="" studyfox_img="20170429\f074865d0fdc50e5391e6d4029ee2e90.zip">
<div class="kv-file-content" style="height:130px">
<div class="kv-preview-data file-preview-other-frame">
<div class="file-preview-other"> <span class="file-other-icon"><i class="glyphicon glyphicon-file"></i></span> </div>
</div>
</div>
<div class="file-thumbnail-footer" style="height:0">
<div class="file-upload-indicator" title="上傳" style="margin-left: 0px; bottom:-26px;"><i class="glyphicon glyphicon-ok-sign text-success"></i></div>
<div class="file-actions">
<div class="file-footer-buttons">
<button type="button" class="kv-file-upload btn btn-xs btn-default" title="上傳文件" style="display: none;"><i class="glyphicon glyphicon-upload text-info"></i></button>
<button type="button" class="kv-file-remove btn btn-xs btn-default" title="刪除文件"><i class="glyphicon glyphicon-trash text-danger"></i></button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="file-preview-status text-center text-success"></div>
<div class="kv-fileinput-error file-error-message" style="display: none;"></div>
</div>
</div>
</div>
~~~
#### 2、刪除文件js
第一步 刪除本地文件
第二步 view的銷毀
第三步 刪除所有文件之后銷毀外框
~~~
$('button.kv-file-remove').click(function(){
var par = $(this).parent().parent().parent().parent();
var img_src = par.attr('studyfox_img');
var id = par.attr('id');
//后臺刪除文件
$.ajax({
url: '$delete_url',
type: 'POST',
data: {'img': img_src},
success: function(result, textStatus){
//圖片刪除成功后移除文本框圖片信息，三種情況 ,號位置在前 后 或沒有,號
var images_value = $('#info_$field').val();//隱藏文本框的值
images_value = images_value.replace(img_src+',', '').replace(','+img_src, '').replace(img_src, ''); //替換,號在右邊;左邊;直接替換
//重新賦值
$('#info_$field').val(images_value);
//view的銷毀
par.remove();
//刪除所有文件之后銷毀外框
if(images_value==''){
$("#file-input").remove();
}
},
error: function(XMLHttpRequest, textStatus){
layer.alert('刪除失敗!', {icon:2});
}
});
});
~~~
### （二）動態刪除
~~~
$value = is_null($fieldinfo['realvalue']) ? '' : $fieldinfo['realvalue'];
if($value!='') {
$values = explode(',',$value);
$str = '';
foreach ($values as $key => $v) {
$num = rand(1000,9999);
$v = str_replace("\/","\\",$v);
$str .= <<<EOF
<div class="file-preview-frame krajee-default kv-preview-thumb file-preview-success" id="uploaded-$num" data-fileindex="-1" data-template="rar" title="" studyfox_img="$v">
<div class="kv-file-content" style="height:130px">
<div class="kv-preview-data file-preview-other-frame">
<div class="file-preview-other"> <span class="file-other-icon"><i class="glyphicon glyphicon-file"></i></span> </div>
</div>
</div>
<div class="file-thumbnail-footer" style="height:0">
<div class="file-upload-indicator" title="上傳" style="margin-left: 0px; bottom:-26px;"><i class="glyphicon glyphicon-ok-sign text-success"></i></div>
<div class="file-actions">
<div class="file-footer-buttons">
<button type="button" class="kv-file-upload btn btn-xs btn-default" title="上傳文件" style="display: none;"><i class="glyphicon glyphicon-upload text-info"></i></button>
<button type="button" class="kv-file-remove btn btn-xs btn-default" title="刪除文件"><i class="glyphicon glyphicon-trash text-danger"></i></button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
EOF;
}
$values = <<<EOF
<div id="file-input" class="file-input">
<div class="file-preview">
<div class=" file-drop-zone">
<div class="file-preview-thumbnails">
$str
</div>
<div class="clearfix"></div>
<div class="file-preview-status text-center text-success"></div>
<div class="kv-fileinput-error file-error-message" style="display: none;"></div>
</div>
</div>
</div>
EOF;
}else{
$values = '';
}
$str = <<<EOF
<input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control" value="$value" >
$values
<input id="file-zh" name="file[]" type="file" multiple>
<link href="$admin/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="$admin/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="$admin/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
……
EOF;
}
return $str;
~~~
## 六、保存編輯
### 1、控制器業務邏輯
~~~
//編輯功能
public function edit( $catid= 0, $id = 0) {
if(request()->isPost()) {
$content = new ContentModel;
if($content->editContent(input('post.'))) {
return success('信息編輯成功!',url('index',['id'=>input('post.catid')]));
} else {
return error('信息編輯失敗!');
}
}else {
//獲取數據
$tablename = getModInfoById($catid,'tablename');
$article = Db::name($tablename)->where('id',$id)->find();
//根據分類ID獲取模型ID
$modelid = getModInfoById($catid,'id');
$modelsFieldArray = Db::name('models_field')->where('modelid',$modelid)->order('sort')->select();
foreach ($modelsFieldArray as $value) {
//字段名
$field = $value['field'];
//字段類型
$func = $value['formtype'];
$value['realvalue'] = $article[$field];
//判斷函數是否存在
if(function_exists($func)){
//獲取表單HTML代碼
$form = $func($value);
if($form != ''){
$info[$field] = array(
'name' => $value['name'],
'form' => $form,
'formtype' => $value['formtype']
);
}
}
}
$this->assign('forminfos',$info);
//分類名稱
$catname = getCatInfoById($catid,'catname');
$this->assign('catname',$catname);
return view();
}
}
~~~
### 2、模型數據處理
~~~
public function editContent($data) {
//dump($data);
if(empty($data) || !is_array($data)) {
return false;
}
$tablename = getModInfoById($data['catid'], 'tablename');//表名
$data['info']['catid'] = $data['catid'];
$data['info']['id'] = $data['id'];
//checkbox和multiple處理
foreach ($data['info'] as $key => $value) {
if(is_array($value)){
$data['info'][$key] = implode(',',$value); //2,3
}
}
if(Db::name($tablename)->update($data['info'])) {
return true;
}else {
return false;
}
}
~~~
## 七、上傳路徑規劃
思路：四級目錄，上傳資源統一保存到public目錄下的uploads下面，旗下設立圖片（image）、文件（file）、視頻（video）、音樂（mp3）等子目錄
格式：./public/image/20180731/43b7b515e635ae88e70f339411960e9c.jpg
### （一）控制器上傳操作
~~~
//單文件（包括圖片）異步上傳
public function upload_image(){
//圖片上傳
$file = request()->file(input('name'));
$info = $file->move(ROOT_PATH . 'public/uploads/image');
if($info) {
return json_encode($info->getSaveName());
}
}
//多圖片上傳
public function upload_images(){
$file = request()->file('file');
$info = $file->move(ROOT_PATH . 'public/uploads/image');
if($info) {
return json_encode($info->getSaveName());
}
}
//多文件上傳
public function upload_downfiles(){
$files = request()->file('file');
foreach ($files as $file) {
$info = $file->move(ROOT_PATH . 'public/uploads/file');
if($info) {
return $info->getSaveName();
}
}
}
//編輯時刪除多文件
public function delete_file(){
$delete_url = input('img');
try {
unlink('./uploads/file/' . $delete_url); //刪除成功返回1
} catch (Exception $e) { }
}
//編輯刪除多圖片
public function delete_image(){
$delete_url = input('img');
try {
unlink('./uploads/image/' . $delete_url); //刪除成功返回1
} catch (Exception $e) { }
}
~~~
> 以上原來的操作如下（僅供參考）：
~~~
//單文件異步上傳
public function upload_image(){
//圖片上傳
$file = request()->file(input('name'));
$info = $file->move(ROOT_PATH . 'public/uploads');
if($info) {
return json_encode($info->getSaveName());
}
}
//多圖片上傳
public function upload_images(){
$file = request()->file('file');
$info = $file->move(ROOT_PATH . 'public/uploads');
if($info) {
return json_encode($info->getSaveName());
}
}
//多文件上傳
public function upload_downfiles(){
$files = request()->file('file');
foreach ($files as $file) {
$info = $file->move(ROOT_PATH . 'public/uploads');
if($info) {
return $info->getSaveName();
}
}
}
//刪除文件或圖片
public function delete_file(){
$delete_url = input('img');
try {
unlink(ROOT_PATH . 'public/uploads/' . $delete_url); //刪除成功返回1
} catch (Exception $e) { }
}
~~~
### （二）百度webuploader插件編輯刪除多圖片
~~~
function images($fieldinfo){
//字段名
$field = $fieldinfo['field'];
$url = url('upload_images');
$delete_url = url('delete_image');
//反序列化設置項
$setting = unserialize($fieldinfo['setting']);
$allowext = $setting['allowext'];
$maxnumber = $setting['maxnumber'];
$admin = config("view_replace_str.__ADMIN__");
$public = config("view_replace_str.__PUBLIC__");
// 默認值
$value = is_null($fieldinfo['realvalue']) ? '' : $fieldinfo['realvalue'];
// 判斷是編輯還是新增
if($value!='') {
$values = explode(',',$value);
$str = '';
foreach ($values as $key => $v) {
$num = rand(1000,9999);
$v = str_replace("\/","\\",$v);
$str .= <<<EOF
<li id="WU_FILE_$num" class="state-complete" studyfox_img="$v">
<p class="imgWrap"><img src="$public/uploads/image/$v" width="110" height="110"></p>
<div class="file-panel" style="height: 0px;"><span class="cancel">刪除</span></div>
<span class="success"></span>
</li>
EOF;
}
$values = <<<EOF
<div id="uploader-list-container" class="uploader-list-container">
<div class="queueListSuccess" style="margin:20px">
<ul class="filelist">
$str
</ul>
</div>
</div>
EOF;
}else{
$values = '';
}
$str = <<<EOF
<input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control" value="$value" >
$values // 妙哉！妙哉！妙哉！
<div class="uploader-list-container">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker-2"></div>
<p>或將圖片拖到這里，單次最多可選 $maxnumber 張</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
<div class="info"></div>
<div class="btns">
<div id="filePicker2"></div>
<div class="uploadBtn">開始上傳</div>
</div>
</div>
</div>
<script src="$admin/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" >
// 這里只是部分代碼
// 負責view的銷毀
function removeFile( file ) {
var li = $('#'+file.id);
var img_src = li.attr('studyfox_img');
delete percentages[ file.id ];
updateTotalProgress();
li.off().find('.file-panel').off().end().remove();
//后臺刪除圖片
$.ajax({
url: '$delete_url',
type: 'POST',
data: {'img': img_src},
success: function(result, textStatus){
//圖片刪除成功后移除文本框圖片信息，三種情況 ,號位置在前 后 或沒有,號
var images_value = $('#info_$field').val();//隱藏文本框的值
images_value = images_value.replace(img_src+',', ''); //替換,號在右邊
images_value = images_value.replace(','+img_src, ''); //替換,號在左邊
images_value = images_value.replace(img_src, ''); //直接替換
//重新賦值
$('#info_$field').val(images_value);
},
error: function(XMLHttpRequest, textStatus){
layer.alert('刪除失敗!', {icon:2});
}
});
}
// 編輯時刪除原圖片
$(".cancel").click(function(){
var img_src = $(this).parent().parent().attr('studyfox_img');
var id = $(this).parent().parent().attr('id');
//后臺刪除圖片
$.ajax({
url: '$delete_url',
type: 'POST',
data: {'img': img_src},
success: function(result, textStatus){
//圖片刪除成功后移除文本框圖片信息，三種情況 ,號位置在前 后 或沒有,號
var images_value = $('#info_$field').val();//隱藏文本框的值
images_value = images_value.replace(img_src+',', '').replace(','+img_src, '').replace(img_src, ''); //替換,號在右邊;左邊;直接替換
//重新賦值
$('#info_$field').val(images_value);
//view的銷毀
var li = $('#'+id);
delete percentages[ id ];
updateTotalProgress();
li.off().find('.file-panel').off().end().remove();
//刪除所有圖片之后銷毀外框
if(images_value==''){
$("#uploader-list-container").remove();
}
},
error: function(XMLHttpRequest, textStatus){
layer.alert('刪除失敗!', {icon:2});
}
});
});
//淡入淡出
var topli = $(".cancel").parent().parent();
topli.on( 'mouseenter', function() {
$(this).children('.file-panel').stop().animate({height: 30});
});
topli.on( 'mouseleave', function() {
$(this).children('.file-panel').stop().animate({height: 0});
});
</script>
EOF;
return $str;
}
~~~
### （三）插件bootstrap-fileinput編輯刪除多文件
~~~
function downfiles($fieldinfo){
$admin = config("view_replace_str.__ADMIN__");
//字段名
$field = $fieldinfo['field'];
$url = url('upload_downfiles');
$delete_url = url('delete_file');
//反序列化設置項
$setting = unserialize($fieldinfo['setting']);
$allowext = $setting['allowext'];
//字符串格式調整
$allowext = str_replace("|","','",$allowext);
$allowext = "'" . $allowext . "'";
$maxnumber = $setting['maxnumber'];
// 默認值
$value = is_null($fieldinfo['realvalue']) ? '' : $fieldinfo['realvalue'];
if($value!='') {
$values = explode(',',$value);
$str = '';
foreach ($values as $key => $v) {
$num = rand(1000,9999);
$v = str_replace("\/","\\",$v);
$str .= <<<EOF
<div class="file-preview-frame krajee-default kv-preview-thumb file-preview-success" id="uploaded-$num" data-fileindex="-1" data-template="rar" title="" studyfox_img="$v">
<div class="kv-file-content" style="height:130px">
<div class="kv-preview-data file-preview-other-frame">
<div class="file-preview-other"> <span class="file-other-icon"><i class="glyphicon glyphicon-file"></i></span> </div>
</div>
</div>
<div class="file-thumbnail-footer" style="height:0">
<div class="file-upload-indicator" title="上傳" style="margin-left: 0px; bottom:-26px;"><i class="glyphicon glyphicon-ok-sign text-success"></i></div>
<div class="file-actions">
<div class="file-footer-buttons">
<button type="button" class="kv-file-upload btn btn-xs btn-default" title="上傳文件" style="display: none;"><i class="glyphicon glyphicon-upload text-info"></i></button>
<button type="button" class="kv-file-remove btn btn-xs btn-default" title="刪除文件"><i class="glyphicon glyphicon-trash text-danger"></i></button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
EOF;
}
$values = <<<EOF
<div id="file-input" class="file-input">
<div class="file-preview">
<div class=" file-drop-zone">
<div class="file-preview-thumbnails">
$str
</div>
<div class="clearfix"></div>
<div class="file-preview-status text-center text-success"></div>
<div class="kv-fileinput-error file-error-message" style="display: none;"></div>
</div>
</div>
</div>
EOF;
}else{
$values = '';
}
$str = <<<EOF
<input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control" value="$value" >
$values
<input id="file-zh" name="file[]" type="file" multiple>
<link href="$admin/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="$admin/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="$admin/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
<script type="text/javascript" >
// 編輯刪除文件
$('button.kv-file-remove').click(function(){
var par = $(this).parent().parent().parent().parent();
var img_src = par.attr('studyfox_img');
var id = par.attr('id');
//后臺刪除文件
$.ajax({
url: '$delete_url',
type: 'POST',
data: {'img': img_src},
success: function(result, textStatus){
//圖片刪除成功后移除文本框圖片信息，三種情況 ,號位置在前 后 或沒有,號
//獲取隱藏文本框的值
var images_value = $('#info_$field').val();
//替換,號在右邊;左邊;直接替換
images_value = images_value.replace(img_src+',', '').replace(','+img_src, '').replace(img_src, '');
//重新賦值
$('#info_$field').val(images_value);
//view的銷毀
par.remove();
//刪除所有文件之后銷毀外框
if(images_value==''){
$("#file-input").remove();
}
},
error: function(XMLHttpRequest, textStatus){
layer.alert('刪除失敗!', {icon:2});
}
});
});
</script>
EOF;
return $str;
}
~~~
### （四）百度編輯器ueditor1上傳圖片路徑
#### 1、修改js文件
位置：\ueditor1_4_3_3\php\config.json
代碼：
~~~
/* 上傳圖片配置項 */
"imagePathFormat": "/uploads/image/{yyyy}{mm}{dd}/{time}{rand:6}",
/* 涂鴉圖片上傳配置項 */
"scrawlPathFormat": "/uploads/image/{yyyy}{mm}{dd}/{time}{rand:6}",
/* 截圖工具上傳 */
"snapscreenPathFormat": "/uploads/image/{yyyy}{mm}{dd}/{time}{rand:6}",
/* 抓取遠程圖片配置 */
"catcherPathFormat": "/uploads/image/{yyyy}{mm}{dd}/{time}{rand:6}",
/* 上傳視頻配置 */
"videoPathFormat": "/uploads/video/{yyyy}{mm}{dd}/{time}{rand:6}",
/* 上傳文件配置 */
"filePathFormat": "/uploads/file/{yyyy}{mm}{dd}/{time}{rand:6}",
/* 列出指定目錄下的圖片 */
"imageManagerListPath": "/uploads/image/",
/* 列出指定目錄下的文件 */
"fileManagerListPath": "/uploads/file/",
~~~
#### 2、字段函數
~~~
function editor($fieldinfo){
//字段名
$field = $fieldinfo['field'];
//反序列化設置項
$setting = unserialize($fieldinfo['setting']);
//默認值
$value = is_null($fieldinfo['realvalue']) ? $setting['defaultvalue'] : $fieldinfo['realvalue'];
//高度
$height = $setting['height'];
$admin = config("view_replace_str.__ADMIN__");
$str = <<<EOF
<script id="container" name="info[$field]" type="text/plain">$value</script>
<script src="$admin/plugins/ueditor1_4_3_3/ueditor.config.js"></script>
<script src="$admin/plugins/ueditor1_4_3_3/ueditor.all.js"></script>
<script>
var um = UE.getEditor('container',{
initialFrameHeight:$height,
autoHeightEnabled:false,
catchRemoteImageEnable:true
});
</script>
EOF;
return $str;
}
~~~
#### 3、拓展閱讀
[內部鏈接](http://www.hmoore.net/wayanbao/thinkphp/708574)
- Layer無刷新不跳轉彈框提示信息
- 整合ThinkPHP+實用代碼
- TP整合Layer插件實現無刷新
- 自定義助手函數
- 添加信息失敗后不跳轉
- 三種無限級分類
- TP常用代碼
- 自定義公共函數
- TP模型管理專題
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之刪除模型
- TP模型管理之編輯模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段刪除
- TP模型管理之字段編輯
- TP模型管理之預覽模型
- TP模型管理之公共函數
- layer_hplus.js_修訂一
- TP模型管理之預覽模型靜態頁
- 后臺內容管理系統
- 分類樹顯示
- 內容列表顯示
- 信息發布
- 編輯信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 簡單調用
- 路徑問題
- 跨域多圖上傳
- 跨域單圖上傳
- UEditor圖片跨域上傳解決方案
- 定制工具欄圖標
- ajaxFileUpload
- LayUI
- 圖片上傳
- layui分頁
- 搜索頁
- 搜索優化及刪除
- Uploadify
- TP5前端應用
- 靜態首頁
- 前臺首頁功能實現
- 自定義標簽庫
- 前臺模板繼承應用
- 首頁自定義標簽改進
- 文章內容頁
- 自定義標簽改進
- 自定義標簽修正
- 圖片等比例自動縮放
- 后臺權限管理
- 角色管理
- 規則管理
- 權限設置
- 會員管理
- 權限管理
- 前臺登錄注冊功能
- 注冊登錄
- 阿里大于手機注冊
- 阿里大于升級阿里云短信服務
- 自動登錄完成
- PHP異位或加密實現自動登陸
- 微信開發
- 分享接口
- 靜態頁面實現微信分享
- 動態頁微信分享
- 頁面靜態化
- 1-全站靜態化前期配置
- 2-鏈接地址靜態化
- TP5常用片段代碼
- 加載靜態資源路徑與常量
- thinkphp5預定義常量
- 刪除某文件夾的內容
- 解壓插件包
- 異步提交插件
- 其他功能
- 背景音樂
- 手機訪問PC網站自動跳轉到手機網站代碼
- 手機微信音樂MP3播放器
- 后盾之網頁背景音樂
- 播放器寬度自適應
- 前臺首頁數據調用
- 視頻列表
- 搜索分頁
- H5解決蘋果（IOS）不能自動播放音樂
- 清空緩存
- 文件處理常識
- 刪除路徑下的所有文件夾和文件
- 一鍵清空緩存
- 評論留言
- 格式化時間
- 替換微博內容的URL地址@用戶與表情
- PHP正則理解
- jQuery評論插件
- TP空操作
- TP路由
- 跨域訪問
- 設置請其頭允許跨域請求
- 模板前臺判斷手機訪問跳轉手機網址代碼
- PHP遍歷一個文件夾下所有文件和子文件夾
- PHP獲取視頻的第一幀與時長
- TP5數據庫
- 鏈式操作原理
- update替換字段部分內容
- 后臺開發
- 后臺登錄頁居中顯示
- TP5自帶驗證碼
- JS & JQuery專題
- 二級城市聯動菜單
- 模板引擎
- 混合模板編譯
- 黃永成TP微博開發
- 消息推送
- memcache安裝
- 插件開發
- 插件介紹
- 插件鉤子
- 淺談初步理解鉤子
- 插件鉤子(hooks)分析
- 插件鉤子簡單理解
- 控制器調用插件
- 鉤子通用處理函數
- 插件基類代碼
- 插件測試代碼
- 淺談鉤子與插件
- 技術綜合
- 常用代碼
- PHP
- 56個PHP開發常用代碼片段（上）
- 56個PHP 開發常用代碼片段（中）
- 56個PHP 開發常用代碼片段（下）
- sublime text安裝自動補全注釋的插件
- 影音視頻開發
- 視頻
- H5視頻直播掃盲
- 音樂
- 語音
- PHP實現語音播報功能
- MUI
- 窗體操作