整合了下批量上传可以拖动排序【swfupload】-优快云博客

本文分享了如何利用Swfupload插件进行AJAX文件上传，并实现文件的拖动排序功能。介绍了插件的配置、事件处理、HTML视图布局及控制器处理流程。同时提供了完整的代码示例，包括上传图片的处理、删除图片的异步处理和控制器方法的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享下tp整合的swfupload插件，实现ajax上传、拖动排序。有不合理的地方望大牛们别喷。

1、这属于第三方控件，我们先建一个Vendor存放第三方控件。当然也可以用别名。

　　控件地址：http://yunpan.cn/cLfV2sHqWDT6G （提取码：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 = "<li><img class='content' src='" + src + "' style=\"width:100px;height:100px; border: #CCCCCC dashed 1px;\" photoId='"+data+"'><img class='button' src="+window.path+"/images/fancy_close.png></li>";
    $("#pic_list").append(newElement);
    $("img.button").last().bind("click", del);
    
}
//删除图片功能
var del = function(){
//  var fid = $(this).parent().prevAll().length + 1;
    var src=$(this).siblings('img').attr('src');
    var $svalue=$('input[name=s]').val();
    $.ajax({
      type: "GET", //访问WebService使用Post方式请求
      url: window.url+"/del", //调用WebService的地址和方法名称组合---WsURL/方法名
      data: "src=" + src,
      success: function(data){
         data=data.split('http://xxxx.com2.z0.glb.qiniucdn.com/')[1];//这里我是放到七牛云存储的，截取
        var $val=$svalue.replace(data,'');        
            $('input[name=s]').val($val);
      }
  });
  $(this).parent().remove();
}


function fadeIn(element, opacity){
    var reduceOpacityBy = 5;
    var rate = 30; // 15 fps
    if (opacity < 100) {
        opacity += reduceOpacityBy;
        if (opacity > 100) {
            opacity = 100;
        }
        
        if (element.filters) {
            try {
                element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
            } 
            catch (e) {
                element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
            }
        }
        else {
            element.style.opacity = opacity / 100;
        }
    }
    
    if (opacity < 100) {
        setTimeout(function(){
            fadeIn(element, opacity);
        }, rate);
    }
}

function FileProgress(file, targetID){
    this.fileProgressID = "divFileProgress";
    
    this.fileProgressWrapper = document.getElementById(this.fileProgressID);
    if (!this.fileProgressWrapper) {
        this.fileProgressWrapper = document.createElement("div");
        this.fileProgressWrapper.className = "progressWrapper";
        this.fileProgressWrapper.id = this.fileProgressID;
        
        this.fileProgressElement = document.createElement("div");
        this.fileProgressElement.className = "progressContainer";
        
        var progressCancel = document.createElement("a");
        progressCancel.className = "progressCancel";
        progressCancel.href = "#";
        progressCancel.style.visibility = "hidden";
        progressCancel.appendChild(document.createTextNode(" "));
        
        var progressText = document.createElement("div");
        progressText.className = "progressName";
        progressText.appendChild(document.createTextNode(file.name));
        
        var progressBar = document.createElement("div");
        progressBar.className = "progressBarInProgress";
        
        var progressStatus = document.createElement("div");
        progressStatus.className = "progressBarStatus";
        progressStatus.innerHTML = "&nbsp;";
        
        this.fileProgressElement.appendChild(progressCancel);
        this.fileProgressElement.appendChild(progressText);
        this.fileProgressElement.appendChild(progressStatus);
        this.fileProgressElement.appendChild(progressBar);
        
        this.fileProgressWrapper.appendChild(this.fileProgressElement);
        
        document.getElementById(targetID).appendChild(this.fileProgressWrapper);
        fadeIn(this.fileProgressWrapper, 0);
        
    }
    else {
        this.fileProgressElement = this.fileProgressWrapper.firstChild;
        this.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
    }
    
    this.height = this.fileProgressWrapper.offsetHeight;
    
}

FileProgress.prototype.setProgress = function(percentage){
    this.fileProgressElement.className = "progressContainer green";
    this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
    this.fileProgressElement.childNodes[3].style.width = percentage + "%";
};
FileProgress.prototype.setComplete = function(){
    this.fileProgressElement.className = "progressContainer blue";
    this.fileProgressElement.childNodes[3].className = "progressBarComplete";
    this.fileProgressElement.childNodes[3].style.width = "";
    
};
FileProgress.prototype.setError = function(){
    this.fileProgressElement.className = "progressContainer red";
    this.fileProgressElement.childNodes[3].className = "progressBarError";
    this.fileProgressElement.childNodes[3].style.width = "";
    
};
FileProgress.prototype.setCancelled = function(){
    this.fileProgressElement.className = "progressContainer";
    this.fileProgressElement.childNodes[3].className = "progressBarError";
    this.fileProgressElement.childNodes[3].style.width = "";
    
};
FileProgress.prototype.setStatus = function(status){
    this.fileProgressElement.childNodes[2].innerHTML = status;
};


FileProgress.prototype.toggleCancel = function(show, swfuploadInstance){
    this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
    if (swfuploadInstance) {
        var fileID = this.fileProgressID;
        this.fileProgressElement.childNodes[0].onclick = function(){
            swfuploadInstance.cancelUpload(fileID);
            return false;
        };
    }
};

View Code

3、视图view我们的html中，我们需要做以下步骤：

　　1）、加入一个js，声明下。handlers.js才能使用。代码：

<script type="text/javascript">
    var path='__STYLE__';
    var url='__URL__';
</script>

　　2）、引入。代码：

<script type="text/javascript" src="__STYLE__/js/swfupload.js"></script>
<script type="text/javascript" src="__STYLE__/js/handlers.js"></script>
<link href="__STYLE__/css/default.css" rel="stylesheet" type="text/css" />

　　3）、处理、事件。代码：

<script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                upload_url: "__URL__/uploadImg", //这个是控制中的方法。别弄错了。

                post_params: {"PHPSESSID": "<?php session_start(); echo session_id();?>"},
                file_size_limit : "2 MB",
                file_types : "*.jpg;*.png;*.gif;*.bmp",
                file_types_description : "JPG Images",
                file_upload_limit : "100",
                file_queue_error_handler : fileQueueError,
                file_dialog_complete_handler : fileDialogComplete,
                upload_progress_handler : uploadProgress,
                upload_error_handler : uploadError,
                upload_success_handler : uploadSuccess, 
                upload_complete_handler : uploadComplete,
                button_image_url : "__STYLE__/images/upload.png",
                button_placeholder_id : "spanButtonPlaceholder",
                button_width: 113,
                button_height: 33,
                button_text : '',
                button_text_style : '.spanButtonPlaceholder { font-family: Helvetica, Arial, sans-serif; font-size: 14pt;} ',
                button_text_top_padding: 0,
                button_text_left_padding: 0,
                button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
                button_cursor: SWFUpload.CURSOR.HAND,            
                flash_url : "__STYLE__/swf/swfupload.swf",
                custom_settings : {upload_target : "divFileProgressContainer"},                
                debug: false
            });
        };
    //拖动排序    
    $(function() {
        
        $( "#pic_list" ).sortable({ axis: 'x', items: 'li' , update: function(event, ui) { 
        //每更新一次排序，按序重置piclist-input的值；
        var onearray =$( "#pic_list" ).sortable( "toArray" );
         var value='';
             $.each(onearray,function(key,val){ 
            //var id="ul li:eq("+key+")>img";
            var id="ul#pic_list li:eq("+key+")>img";
            var onevalue= $(id).attr("src");
            onevalue=onevalue.split('http://xxxx.com2.z0.glb.qiniucdn.com/')[1];
            value =value+onevalue+"|";
            }); 
            $( "#piclist" ).val(value);
            }
            });
        
    });

    </script>

View Code

　　4)、DIV 。代码：

 <div class="col-sm-9 goods_images">
          
          <div style="width: 610px; height: auto; border: 1px solid #e1e1e1; font-size: 12px; padding: 10px;">
            <span id="spanButtonPlaceholder"></span>
            <!--<div id="divFileProgressContainer"></div>-->
            
            
            <div id="thumbnails">
                <ul id="pic_list" style="margin: 5px;">
                <volist name="imgs" id="img">
                <li ><img class="content"  src="http://xxxx.com2.z0.glb.qiniucdn.com/{$img.goods_images}" style="width:100px;height:100px; border: #CCCCCC dashed 1px;"  photoId="{$img.goods_images}"><a href="javascript:;" onclick="del_img({$img.id});" title="删除"><img class="button" src="__STYLE__/images/fancy_close.png"></a></li>
                </volist>
                </ul>
                <div style="clear: both;"></div>
           </div>
           
           
        </div>
        <input type="hidden" name="s" id="piclist" value="{$s}" size=100/>
            
        </div>

View Code

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

View Code

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

View Code

//没入库前的删除方法    
function del() {
        $src=str_replace(__ROOT__.'/', '', str_replace('//', '/', $_GET['src']));
        if (file_exists($src)){
            unlink($src);
        }
        print_r($_GET['src']);
        exit();
    }

View Code

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

View Code

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'=>'删除成功'));
        }
    }