plupload—强大的前端上传组件

发表于   |   分类于 前端   |   暂无评论

    相信很多小伙伴在日常的项目功能中不止一次用到过上传插件吧，常用的上传插件有很多，比如有名的uploadify，我之前的项目中一直也是在用uploadify，但是最近的一个项目，却让我不得不放弃了这个好用、方便的上传插件，改用起了plupload，这个组件真心强大，不仅支持各种浏览器，而且上传方式也是多种多样，下面我来介绍一下这个组件简单的demo和配置：

简介

    plupload是前端的一款上传组件，他拥有多种上传方式HTML5、flash、silverlight等，并会自动侦测当前的环境，选择最合适的上传方式。只是这一点就让人心动了，前端的朋友一定知道，有的插件对浏览器的要求也很高，但是plupload最低支持IE7以上，用过的童鞋一定会对这款组件的强大赞不绝口！废话不多说，下面介绍它的使用：

使用

  1. 和大多数插件的使用方式一样，首先要去下载一个它的文件包plupload-2.1.9版压缩包

  2. 引入js文件，如果只是做简单的上传操作，引入这一个就够了
    <script type="text/javascript" src="plupload.full.min.js"></script>

  3. 接着实例化一个plupload对象，传入所需要的配置对象

  4. 调用init()方法初始化

前端demo示例

HTML

  <td width="10%" class="tdbg"><label>图片</label></td>
  <td width="37.5%" colspan="3">
        <div id="container">
              &nbsp;<a id="pickfiles" href="javascript:;" style="color: white;">请选择图片</a> &nbsp;&nbsp; 
              <a id="uploadfiles" href="javascript:;" class="btn_s" style="padding:2px 14px;">上传</a>
              <p id="ppp"></p> <!-- 显示上传图片名字  -->
              <input type='hidden' name='photo' id="photo" value=""> <!-- 上传成功保存上传文件路径  -->
        </div>
  </td>

JS

 var uploader = new plupload.Uploader({
  runtimes : 'html5,flash,silverlight,html4',
  browse_button : 'pickfiles', // 选择图片按钮ID
  container: document.getElementById('container'), 
  url : '<?php echo module_url("sample/main/uploadify_upload")?>',  //上传路径
  flash_swf_url : '<?php echo base_url("js/plupload/Moxie.swf");?>',
  silverlight_xap_url : '<?php echo base_url("js/plupload/Moxie.xap");?>',
  
  filters : {
    max_file_size : '10mb',  //设置上传大小
    mime_types: [
      {title : "Image files", extensions : "jpg,gif,png,jpeg"},  //指定文件格式
    ]
  },
  init: {      //初始化方法
    PostInit: function() {
      document.getElementById('uploadfiles').onclick = function() {  //点击上传按钮动作
        uploader.start();
        return false;
      };
    },
    FilesAdded: function(up, files) { 
      plupload.each(files, function(file) {
        document.getElementById('ppp').innerHTML = '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';  //显示所选图片名字
      });
    },
    FileUploaded: function(uploader,file,responseObject) {  //上传成功回调函数
      var data = JSON.parse(responseObject.response);
      var li   = "<img src='"+data.file_url+"' style='width:250px;height:200px;' />"; //组装图片html
      var file_path = $("#photo").val();  //取出图片路径
      if(file_path) {  //如果file_path有值 删除原有图片文件
        $.post('<?php echo module_url("item/main/delete_photo")?>', {file_path: file_path}, function(data) {
          console.log(data);
        });
      }
      $("#photo").val(data.url);  //更新hidden 图片路径
      $("#image_up").html(li);    //显示图片
    },
    Error: function(up, err) {    //返回错误信息
      alert(err.message);
    }
  }
});

后端demo示例

上传图片处理

/**
 * 上传图片
 * @return  
 */
public function plupload_photo() {
    $targetPath = './uploads/breed_photo';
    $file_ext = array('jpg', 'png', 'jpeg');
    $arr = $this->plupload($targetPath, $file_ext);
    return $arr;
}

/**
 * 上传图片处理
 * @param  string $targetPath 相对路径
 * @param  array $file_ext    允许上传文件后缀
 * @return json(file_url完整路径;url相对路径 )  
 * @author 命中水、 
 * @date(2016-9-29 am)             
 */
function plupload($targetPath, $file_ext) {
    if(empty($targetPath) || empty($file_ext) || !is_array($file_ext)) {
      return '不是正确的文件类型';
    }
    $tempFile = $_FILES["file"]["tmp_name"];
    if (!file_exists($targetPath)) {
      @mkdir($targetPath);
        chmod($targetPath, 0777);
    }

    $file_name   = $_REQUEST['name'];
    $fileParts   = pathinfo($file_name);
    $date          = date('YmdHis', time());
    $targetFile  = rtrim($targetPath,'/').'/'.$date.'_'.$file_name;
    $targetFiles = iconv("UTF-8", "GBK//IGNORE",$targetFile);
    $url         = base_url(substr($targetFile,1));
    if (in_array($fileParts['extension'],$file_ext)) {
      if(move_uploaded_file($tempFile,$targetFiles)){
        $file_message = array(
          'file_url' => $url,
          'url'      => substr($targetFile,1)
          );
        return json_encode($file_message);
      }else{
        echo '啊哦！文件移动失败了,请检查文件路径';
        return FALSE;
      }
    } else {
      echo '文件类型不匹配哈！';
      return FALSE;
    }
 }

删除图片处理

/**
 * 删除文件
 * @return bool 
 */
public function delete_photo() {
    $file_path = $this->input->post('file_path');
    $file_path = str_replace('/', '\\', $file_path);
    $file_path = getcwd() . $file_path;  //转换绝对路径 
    $file_path = iconv("UTF-8", "GBK",$file_path);  //调整编码
    if( unlink( $file_path ) ) return TRUE;
    return FALSE;
}

附录资源

  1. plupload下载地址

  2. plupload配置和各事件说明

  3. plupload-2.1.9版压缩包
添加新评论