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