OneThink二次开发实现多图片批量上传功能

由于想要实现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获取图片地址。
明白原理后要实现其它地方上传(如前台上传)，上传其它类型文件以及定义上传路径等就都可以扩展改编来实现。