|
|
本帖最后由 tonychan 于 2011-11-6 15:01 编辑
最近公司改版主站，选来选去最终选了CI做框架，然后就发现了DiliCMS，自己下载本机测试了下，感觉用起来真的挺爽的，写完公司网站有点空闲时间了就想着再测试测试，自己用CI还不到20天，用起来是很顺手，但是的确有很多地方急需学习的，所以也趁机会看看大大们是怎么用CI的。
直接把自己刚做的后台功能迁移过来做测试，发现产品图片上传，案例图片上传的时候，Dili的附件上传用着很别扭，于是自己做了小改动,思路如下：
1.添加了字段类型(隐藏字段,不在表单视图显示出来)--图片上传区域(TEXT).
2.修改content_form表单视图--添加跟字段对应的图片上传区域(实际上就是把附件上传从右上角迁移到了表单里边 哈哈),同时小改了admincp\default\js\dili_utility\upload.js文件,免除复制图片路径的麻烦.
3.修改Content控制器 接收附件上传完成后的图片路径进行入库.
修改过程如下：
首先添加字段
字段模型
application\models\dili\column_mdl.php
增加
在 switch($data['type']) 语句添加一个case:
PHP复制代码
switch($data['type'])
{
//图片上传字段(TEXT)
case 'pic':
$field = array(
'type' => 'TEXT',
'default' => ''
) ;
break;
}
然后 修改Form类库
application\libraries\dili\Form.php
在类最后添加_pic()方法,暂时不用返回任何值
PHP复制代码
function _pic($field, $default){
//$type= 'type=hidden';
//$width=($field['width'] ? $field['width'] : '570') .'px;';
//$height=($field['height'] ? $field['height'] : '415') .'px;';
return ;
}
效果图
然后 修改content_form视图
admincp\default\content_form.php
因为视图布局有所改动,所要添加自己的 my_uploader 视图
admincp\default\my_uploader.php
HTML复制代码
<!--admincp\default\content_form.php-->
<form action="<?php echo backend_url('content/save','model='.$model['name'].'&id='.(isset($content['id']) ? $content['id'] : '')); ?>" method="post">
<table class="form_table" >
<col width="150px" />
<col />
<?php foreach( $model['fields'] as $v) : ?>
<?php if($v['editable']): ?>
<tr>
<th> <?php echo $v['description'];?>： </th>
<td>
<?php
//图片上传字段
if($v['type']=="pic"):?>
<div class="search f_l" style="position:relative">
<button class="btn" type="button" hidefocus="true" ><span class="add">附件列表 </span></button>
<?php $this->load->view('my_uploader'); ?>
</div>
<?php endif;?>
<?php $this->form->display($v , isset($content[$v['name']]) ? $content[$v['name']] : ''); ?>
<?php echo form_error($v['name']); ?>
</td>
</tr>
<?php endif; ?>
<?php endforeach; ?>
<?php $this->plugin_manager->trigger_model_action('register_view', $content); ?>
<tr>
<th></th>
<td>
<?php if($model['hasattach']): ?>
<?php $this->form->show_hidden('uploadedfile','0',true); ?>
<?php endif; ?>
<button class="submit" type='submit'><span><?php echo $button_name; ?></span></button>
</td>
</tr>
</table>
</form>
HTML复制代码
<!--my_uploader.php-->
<div id="my_uploader">
<div style="position:relative;text-align:left;">
<p style="line-height:30px;"><a style="margin:2px;" id="uploaderSwitcher" href="javascript:void(0)">打开上传控件 </a>允许上传的格式: <b><?php echo setting('attachment_type'); ?></b>,大小限制: <b><?php echo number_format($maxsize = setting('attachment_maxupload')/1024/1024,2); ?>MB </b> </p>
<div id="uploaderContainer" style="position:absolute;z-index:3000000;display:none;background:#ccc;">
<object id="swfuploader" type="application/x-shockwave-flash" data="js/dili_utility//upload.swf?site=<?php echo backend_url('attachment'); ?>" width="470" height="268">
<param name="movie" value="js/dili_utility/upload.swf?site=<?php echo backend_url('attachment'); ?>"/>
<param name="allowFullScreen" value="false" />
<?php if(!strpos($_SERVER['HTTP_USER_AGENT'],'MSIE')): ?>
<param name="wmode" value="transparent" />
<?php endif; ?>
</object>
</div>
</div>
<ul id="attachList" >
<li id="loading"></li>
<?php if(isset($attachment)): ?>
<?php foreach($attachment as $v): ?>
<li id="attachment_<?php echo $v['aid']; ?>">
<span class="title"><input type="text" class="normal" id="pic_<?php echo $v['aid']; ?>" value="/ <?php echo setting('attachment_dir').'/'.$v['folder'].'/'.$v['name'].'.'.$v['type']; ?>" name=" <?php echo $v['name']?>" /> </span>
<?php if($v['image'] == 1): ?>
<a href="javascript:void(0);" target="_blank">预览 </a>
<?php endif;?>
<a href="javascript:void(0);">删除 </a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
<script language="javascript">
var base_url = ' <?php echo base_url(); ?>' ,backend_url = ' <?php echo backend_url($this->uri->rsegment(1)).'/'; ?>',attach_url = base_url + 'attachments/',attachment_dir = ' <?php echo '/'.setting('attachment_dir').'/'; ?>';
</script>
<script src="js/dili_utility/upload.js"></script>
</div>
改动admincp\default\images\admin.css
在317行后增加 #my_uploader
CSS复制代码
/*my_uploader*/
#my_uploader{width:470px;border:1px #ccc solid;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background:#FFF;}
修改admincp\default\js\dili_utility\upload.js 43行 给 input添加name属性
JS复制代码
//admincp\default\js\dili_utility\upload.js
html = "<li id=\"attachment_" + v[0] + "\"><span class=\"title\"><input type=\"text\" class=\"normal\" id=\"pic\" name=\"pic[]\" value=\""+ attachment_dir + v[4] + '/' + v[2] + '.' + v[5] + "\" />(未保存)</span>";
效果图
最终修改content控制器
application\controllers\admin\content.php
修改 _save_post方法
PHP复制代码
//application\controllers\admin\content.php
foreach($modeldata['fields'] as $v)
{
if($v['editable'])
{
$data[$v['name']] = $this->input->post($v['name']);
if(($v['type'] == 'checkbox' || $v['type'] == 'checkbox_from_model') && is_array($data[$v['name']]))
{
$data[$v['name']] = $data[$v['name']] ? implode(',',$data[$v['name']]) : '';
}
//图片上传字段
$pic=$this->input->post('pic');
if(($v['type'] == 'pic' || $v['type'] == '_pic')&&!empty($pic))
{
$data[$v['name']] = implode(',',$pic);
}
}
}
到此修改完成.
效果图
ps:对于此修改有什么不适当的地方还有待研究,本修改只是换了一种图片附件的上传方式而已,后续还需要很多完善的地方 比如 上传字段的显示或隐藏,显示时候的宽高控制等等,不过刚看到DiliCMS2.0马上就要出了,所以后续就不做了,哈哈 ,等新版本出来了看看有什么功能改进先
二楼兄弟感觉不太理解 现在把图片也贴上来 这样应该就容易理解了 其实都是小改动而已
|
评分
-
查看全部评分
|
[复制链接]
IP卡
狗仔卡
发表于 2011-11-5 23:17:18
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
