本文共 4418 字，大约阅读时间需要 14 分钟。

长时间没用plupload了，发现现在版本已经到plupload3了。

网上找了篇好文回顾一下，以下代码js和html部分亲测有效，php代码部分使用自己原来系统的，文章中的尚未测试。

plupload插件官方地址：

参数，方法，设置说明文档地址： 、

前端

使用方法：

界面：

添加前端显示的为上传按钮

   
     
         
    点击添加     
         
    
          
     
          
     
     
    
     
         
    
          
     
          
    
   

添加文件之后的plupload对象

//上传图片uploader_img.setOption("multipart_params", {
   'caseName': caseName});//设置上传附带的参数uploader_img.start();

上传的xhr

PHP后台处理

上传类:

   file_path=$filePath;        $this->blob_num=$blobNum;        $this->total_num=$totalNum;        $this->file_name=$fileName;        $this->temp_name=$tempName;        $this->temp_path=ROOT_PATH.'public/upload/';        $this->moveFile();        $this->mergeFile();     }    //移动临时文件    private function moveFile(){
           $this->touchDir();        //将php上传的临时文件移动到临时目录        $filename=$this->temp_path.$this->file_name.'_'.$this->blob_num;        move_uploaded_file($this->temp_name,$filename);    }    //合并文件    private function mergeFile(){
           //当前分片序号（从0开始）等于总分片数-1        if($this->blob_num==($this->total_num-1)){
               $blob='';            //使用fopen            //使用file_get(put)_contents            //先判断文件是否已经存在            if(file_exists($this->file_path.iconv('UTF-8','GB2312',$this->file_name))){
                   @unlink($this->file_path.iconv('UTF-8','GB2312',$this->file_name));            }            for($i=0;$i<$this->total_num;$i++){
                   $blob=file_get_contents($this->temp_path.$this->file_name.'_'.$i);                $last_path=$this->file_path.$this->file_name;                iconv('UTF-8','GB2312',$this->file_path.$this->file_name);                file_put_contents($last_path,$blob,FILE_APPEND);            }            $this->deleteTempFile();        }    }    //删除上传的临时文件    private function deleteTempFile(){
           for($i=0;$i<$this->total_num;$i++){
               @unlink($this->temp_path.$this->file_name.'_'.$i);        }    }    //创建文件架    private function touchDir(){
           //上传目录         if(!file_exists($this->file_path)){
               $oldmask=umask(0);            @mkdir($this->file_path,0777,true);            umask($oldmask);        }        //临时文件上传目录        if(!file_exists($this->temp_path)){
               @mkdir($this->temp_path,0777,true);        }        return;    }    //API返回数据GB    public function apiReturn(){
           if($this->blob_num==($this->total_num-1)){
               //修改文件权限            $oldmask=umask(0);            $res=chmod($this->file_path.$this->file_name,0777);            umask($oldmask);            $res1=$this->file_path.$this->file_name;            $res2=file_exists($res1);            if($res2){
                   $data['code']=2;                $data['msg']='success';                $data['file_path']=$this->file_path.$this->file_name;            }        }else{
               if(file_exists($this->temp_path.$this->file_name.'_'.$this->blob_num)){
                   $data['code']=1;                $data['msg']='waiting for all';                $data['file_path']='';            }        }        return $data;     } }

调用上传类

public function uploadImg(){
       if ($_FILES['file']['error'] == 0) {
           $caseName = trim($this->request->param('caseName'));//获取参数        $file_path = ROOT_PATH . '/img/';//设置文件路径        $blob_num = $this->request->param('chunk');//当前片数        $total_num = $this->request->param('chunks');//总片数        $file_name = $this->request->param('name');//文件名称        $temp_name = $_FILES['file']['tmp_name'];//零时文件名称        $uploadClass = new Upload($file_path, $blob_num, $total_num, $file_name, $temp_name);//实例化upload类，并传入相关参数        $data = $uploadClass->apiReturn();        return json_encode($data);    } else {
           $data['code'] = 0;        $data['msg'] = 'error code:' . $_FILES['file']['error'];        $data['file_path'] = '';        return json_encode($data);    }}

上传成功后返回的信息：

上传成功之后，plupload对象会调用FileUploaded事件

FileUploaded: function (up, file, res) {
       //文件上传完成后，up:plupload对象，file:上传的文件相关信息，res:服务器返回的信息    //进行相关处理}

上传过程中会调用UploadProgress事件

UploadProgress: function (up, file) {
    //上传过程中调用的方法   $('#img-progress').show();   var percent = file.percent;   element.progress('img', percent + '%');}

该方法可以用来控制进度条。

若有不足之处，敬请见谅！

==================================

参考

《》

文中提到的$('.draggable-element').arrangeable();，使用了如下的插件

转载地址：http://yakpi.baihongyu.com/