OneThink实现多图片批量上传功能

OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的，默认是只能上传一张图片的，但是uploadify.swf是支持多图片批量上传的，那么我们稍加改动就可实现OneThink实现多图片批量上传功能。

首先我们修改模型管理中的字段类型选项，在里面添加一项“批量上传图片”，如下图所示。

添加方法：打开Application/Admin/Common/function.php文件，找到function get_attribute_type($type=”)，在第86行下添加一项’uploadpics’ => array(‘批量上传图片’,’varchar(255) NOT NULL’)

/*********************
 *copyright www.devdo.net*
 *获取属性类型信息********
*********************/
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>

 

最终原理，定义一个字段，存取的是图片的ID序列，图片上传成功后保存ID，再通过ID获取图片地址。

明白原理后要实现其它地方上传(如前台上传)，上传其它类型文件以及定义上传路径等就都可以扩展改编来实现。

如有不明白地方，请查看详情http://www.devdo.net/onethink-tupianpiliangshangchuan.html