| 分享下tp整合的swfupload插件，实现ajax上传、拖动排序。有不合理的地方望大牛们别喷。 |
1、这属于第三方控件，我们先建一个Vendor存放第三方控件。当然也可以用别名。
控件地址： （提取码：cfc0）解压后放到Vendor目录下。
2、控件中handlers.js我改过。我是为了取得本控件中返回上传后图片名称，赋值给文本域。通过这个文本域进行更新数据库。进行排序。
function fileQueueError(file, errorCode, message){ try { var imageName = window.path+"/images/error.gif"; var errorName = ""; if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) { errorName = "您上传的文件过多！"; } if (errorName !== "") { alert(errorName); return; } switch (errorCode) { case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: imageName = window.path+"/images/zerobyte.gif"; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: imageName = window.path+"/images/toobig.gif"; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: default: alert(message); break; } addImage(imageName); } catch (ex) { this.debug(ex); } }function fileDialogComplete(numFilesSelected, numFilesQueued){ try { if (numFilesQueued > 0) { this.startUpload(); } } catch (ex) { this.debug(ex); }}function uploadProgress(file, bytesLoaded){ try { var percent = Math.ceil((bytesLoaded / file.size) * 100); var progress = new FileProgress(file, this.customSettings.upload_target); progress.setProgress(percent); if (percent === 100) { progress.setStatus("创建缩略图中"); progress.toggleCancel(false, this); } else { progress.setStatus("上传中"); progress.toggleCancel(true, this); } } catch (ex) { this.debug(ex); }}function uploadSuccess(file, serverData){ serverData=serverData.split('<')[0] addImage(serverData); serverData=serverData.split('goods/')[1];//这里做截取，获取名称以|连接加入隐藏域s中。 var $svalue=$('input[name=s]').val(); if($svalue==''){ $('input[name=s]').val(serverData); }else{ $('input[name=s]').val($svalue+"|"+serverData); } }function uploadComplete(file){ try { if (this.getStats().files_queued > 0) { this.startUpload(); } else { var progress = new FileProgress(file, this.customSettings.upload_target); progress.setComplete(); progress.setStatus("所有图片上传成功！"); progress.toggleCancel(false); } } catch (ex) { this.debug(ex); }}function uploadError(file, errorCode, message){ var imageName = window.path+"/images/error.gif"; var progress; try { switch (errorCode) { case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED: try { progress = new FileProgress(file, this.customSettings.upload_target); progress.setCancelled(); progress.setStatus("取消"); progress.toggleCancel(false); } catch (ex1) { this.debug(ex1); } break; case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: try { progress = new FileProgress(file, this.customSettings.upload_target); progress.setCancelled(); progress.setStatus("停止"); progress.toggleCancel(true); } catch (ex2) { this.debug(ex2); } case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: imageName = window.path+"/images/uploadlimit.gif"; break; default: alert(message); break; } addImage(imageName); } catch (ex3) { this.debug(ex3); } }//这个是做显示图片操作function addImage(src){ data=src.split('goods/')[1];//同样截取 var newElement = "
3、视图view我们的html中，我们需要做以下步骤：
1）、加入一个js，声明下。handlers.js才能使用。代码：
2）、引入 。代码：
3）、处理、事件。代码：
4)、DIV 。 代码：
5）、删除del_img()异步处理,这个针对的是已保存数据中的图片启作用，直接操作的是数据库。代码：
//删除数据库图片function del_img(img_id){ if(confirm('确定要删除?')==false){ return; } $.post('{:U('Goods/imgdel')}',{img_id:img_id}, function(response){ if(response.error==0){ alert(response.msg); window.location.reload(); } },'json'); }
4、现在我们到控制器中进行处理。代码：
function uploadImg() { import('Org.Util.UploadFile'); $upload = new \UploadFile();// 实例化上传类 $upload->maxSize = 3145728 ;// 设置附件上传大小 $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 //$savepath='./uploads/'.date('Ymd').'/'; $savepath='./Uploads/goods/'; if (!file_exists($savepath)){ mkdir($savepath); } $upload->savePath = $savepath;// 设置附件上传目录 if(!$upload->upload()) { // 上传错误提示错误信息// $this->error($savepath); $this->error($upload->getErrorMsg()); }else{ // 上传成功 获取上传文件信息 $info = $upload->getUploadFileInfo(); } print_r(J(__ROOT__.'/'.$info[0]['savepath'].'/'.$info[0]['savename']));// print_r($upload); } //没入库前的删除方法 function del() { $src=str_replace(__ROOT__.'/', '', str_replace('//', '/', $_GET['src'])); if (file_exists($src)){ unlink($src); } print_r($_GET['src']); exit(); }
5、我们form提交后的处理。代码：
//商品详细图 $s=I('s');$arr = explode("|",$s);foreach($arr as $u){ if($u!==''){ $goodsimgdata['gid']=$id; $goodsimgdata['goods_images']=$u; }$goodsimgarray[]=goodsimgdata; }$goods_images_add_flag = D('goods_images')->addall($goodsimgarray);if(goods_images_add_flag){ $this->success('成功',U('XXX'));}
6、控制器中imgdel()很简单，我们只做一个删除操作，josn返回提示码。 代码：
function imgdel() { $img_id=I('img_id'); $goodsimgdata['id']=$img_id; $goods_images_add_flag = D('goods_images')->where($goodsimgdata)->delete(); if ($goods_images_add_flag===false) { $this->jsonReturn(array('error'=>1,'msg'=>'删除失败,请稍后再试')); }else { $this->jsonReturn(array('error'=>0,'msg'=>'删除成功')); } }
效果图：
======================================勿喷，谢谢合作====================================