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][]:$_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" : ,

 "swf" : "__STATIC__/uploadify/uploadify.swf",

 "fileObjName" : "download",

 "buttonText" : "批量上传图片",

 "uploader" : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",

 "width" : ,

 'removeTimeout' : ,

 '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);

 },);

 }

 }

 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

巴特西

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

最新文章

热门文章