首页 > 开源系统应用 > Thinkphp > OneThink实现多图片批量上传功能
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
08-08

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

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

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

QQ截图20150808092546

添加方法:打开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>

解释一下这段代码,

<input type="file" id="upload_all">

这是需要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获取图片地址。

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

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*