由于想要实现onethink文章多图上传功能,也就结了很久,在百度搜索onethink图片批量上传,找了很久也没找到相关的技术文章介绍,又去thinkphp官网和onethink官网去找也没找到,多数都是以插件的形式存在,后来也就放置了下来,这几天又搜搜了看,突然发现:此处农马小兵技术已经实现了该功能所以就顺便拿来用,不过测试了下批量上传之后不可二次修改编辑所上传的图片。
OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的,默认是只能上传一张图片的,但是uploadify.swf是支持多图片批量上传的,那么我们稍加改动就可实现OneThink实现多图片批量上传功能。
首先我们修改模型管理中的字段类型选项,在里面添加一项“批量上传图片”,如下图所示实现效果展示。
onethink模型字段添加实现效果:
图片批量上传页面效果展示:
附上代码:
添加方法:打开Application/Admin/Common/function.php文件,找到function get_attribute_type($type=”),在第86行下添加一项’uploadpics’ => array(‘批量上传图片’,’varchar(255) NOT NULL’)。
// 获取属性类型信息
function get_attribute_type($type=''){
// TODO 可以加入系统配置
static $_type = array(
'num' => array('数字','int(10) UNSIGNED NOT NULL'),
'string' => array('字符串','varchar(255) NOT NULL'),
'textarea' => array('文本框','text NOT NULL'),
'datetime' => array('时间','int(10) NOT NULL'),
'bool' => array('布尔','tinyint(2) NOT NULL'),
'select' => array('枚举','char(50) NOT NULL'),
'radio' => array('单选','char(10) NOT NULL'),
'checkbox' => array('多选','varchar(100) NOT NULL'),
'editor' => array('编辑器','text NOT NULL'),
'picture' => array('上传图片','int(10) UNSIGNED NOT NULL'),
'uploadpics' => array('批量上传图片','varchar(255) NOT NULL'), //批量上传图片项
'file' => array('上传附件','int(10) UNSIGNED NOT NULL'),
);
return $type?$_type[$type][0]:$_type;
}
添加这一项后,你在后台添加字段的时候就可以进行选择了,不过要实现功能你还需要修改一些东西。
修改你的模板(如添加文章、修改文章模板),比如Application/Admin/View/Think/edit.html。在<case value=”picture”>…</case>下添加如下代码。
这里是为了实现具体图片上传功能。
<case value="uploadpics">
<!-- 批量上传 -->
<input type="file" id="upload_all">
<input type="hidden" name="{$field.name}" value="{$data[$field['name']]}" class="input_upload_all"/>
<div class="uploadpics_piclist">
<ul class="highslide-gallery">
<notempty name="data[$field['name']]">
<?php
$pics=explode(',', $data[$field['name']]);
foreach($pics as $v){
if($v!=''){
?>
<li><a href="__ROOT__{$v|get_cover='path'}" target="_blank"><img src="__ROOT__{$v|get_cover='path'}"/></a><span onclick="delthispic(this)" dataid="{$v},"></span></li>
<?php
}
}
?>
</notempty>
</ul>
</div>
<script type="text/javascript">
//上传图片
/* 初始化上传插件 */
$("#upload_all").uploadify({
"height" : 30,
"swf" : "__STATIC__/uploadify/uploadify.swf",
"fileObjName" : "download",
"buttonText" : "批量上传图片",
"uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
"width" : 120,
'removeTimeout' : 1,
'fileTypeExts' : '*.jpg; *.png; *.gif;',
"onUploadSuccess" : uploadAll,
'onFallback' : function() {
alert('未检测到兼容版本的Flash.');
}
});
function uploadAll(file, data){
var data = $.parseJSON(data);
var src = '';
if(data.status){
src = data.url || '__ROOT__' + data.path;
var value = '<li><a href="'+src+'" class="highslide" onClick="return hs.expand(this)"><img src="' + src + '"/></a><span onclick="delthispic(this)" dataid="'+data.id+',"></span></li>';
$('.input_upload_all').val($('.input_upload_all').val()+data.id+',');
$('.uploadpics_piclist ul').append(value);
} else {
updateAlert(data.info);
setTimeout(function(){
$('#top-alert').find('button').click();
$(that).removeClass('disabled').prop('disabled',false);
},1500);
}
}
function delthispic(obj){
var dataid=$(obj).attr('dataid');
$('.input_upload_all').val($('.input_upload_all').val().replace(dataid, ""));
$(obj).parent().remove();
}
</script>
</case>
解释一下这段代码:
这是需要uploadify.swf需要关联实例化的上传按钮。
<input type="hidden" name="{$field.name}" value="{$data[$field['name']]}" class="input_upload_all"/>
这个是字段,上传图片后图片的ID集合会保存在这里,以“,”分隔,如(2,5,6,8,12)。
<div class="uploadpics_piclist">
<ul class="highslide-gallery">
<notempty name="data[$field['name']]">
<?php
$pics=explode(',', $data[$field['name']]);
foreach($pics as $v){
if($v!=''){
?>
<li><a href="__ROOT__{$v|get_cover='path'}" target="_blank"><img src="__ROOT__{$v|get_cover='path'}"/></a><span onclick="delthispic(this)" dataid="{$v},"></span></li>
<?php
}
}
?>
</notempty>
</ul>
</div>
图片展示区域,当修改文章,或新添加成功图片时,会把图片加载到这里,以实现可视化编辑。
//上传图片
/* 初始化上传插件 */
$("#upload_all").uploadify({
"height" : 30,
"swf" : "__STATIC__/uploadify/uploadify.swf",
"fileObjName" : "download",
"buttonText" : "批量上传图片",
"uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
"width" : 120,
'removeTimeout' : 1,
'fileTypeExts' : '*.jpg; *.png; *.gif;',
"onUploadSuccess" : uploadAll,
'onFallback' : function() {
alert('未检测到兼容版本的Flash.');
}
});
初始化上传插件。
width:上传按钮的宽度。
height:上传按钮的高度。
swf:插件路径。
buttonText:上传按钮文字。
uploader:上传文件处理路径。
removeTimeout:上传提示框移除时间。
fileTypeExts:支持上传类型。 onUploadSuccess:上传成功后,需要执行的函数。
function uploadAll(file, data){
var data = $.parseJSON(data);
var src = '';
if(data.status){
src = data.url || '__ROOT__' + data.path;
var value = '<li><a href="'+src+'" class="highslide" onClick="return hs.expand(this)"><img src="' + src + '"/></a><span onclick="delthispic(this)" dataid="'+data.id+',"></span></li>';
$('.input_upload_all').val($('.input_upload_all').val()+data.id+',');
$('.uploadpics_piclist ul').append(value);
} else {
updateAlert(data.info);
setTimeout(function(){
$('#top-alert').find('button').click();
$(that).removeClass('disabled').prop('disabled',false);
},1500);
}
}
这是图片上传成功后的处理函数,图片上传成功后会返回一组Json,根据data.status判断是否上传成功,上传成功后需要对各个对象赋值。
data.path 为上传成功后返回的图片地址,我们就需要把图片追加到.uploadpics_piclist ul中,找把图片的ID添加至字段值中,此处定义的是class=”input_upload_all”的隐藏文本框。
function delthispic(obj){
var dataid=$(obj).attr('dataid');
$('.input_upload_all').val($('.input_upload_all').val().replace(dataid, ""));
$(obj).parent().remove();
}
这段代码是用于删除图片的,删除图片需要把字段中的值替换掉当前ID,并且把页面的图片移除掉。
最终原理,定义一个字段,存取的是图片的ID序列,图片上传成功后保存ID,再通过ID获取图片地址。
明白原理后要实现其它地方上传(如前台上传),上传其它类型文件以及定义上传路径等就都可以扩展改编来实现。
发表评论 取消回复