[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、拓展阅读
[内部链接](https://www.kancloud.cn/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
- 窗体操作