jquery上传插件 -- dropzone、plupload、uploadify作对比

在项目中需要用到上传文件的插件先后都使用过这三个上传插件；

现在对这3个插件进行个人分析与建议供大家参考；

dropzone

下载地址：https://github.com/enyo/dropzone/ 

特点：1.兼容Firefox、chrome、Safari、IE10（低版本则采用传统的input file）

           2.可以一次上传多个文件，可点击可拖动；

第一步：浏览器兼容性

     
     
//兼容form表单集合图片提交的写法
<form action=''>
       <div id="file" class="dropzone" > //改成使用DIV调用插件不是用form调用；
              <div class="dropzone-previews"></div>         
       </div>   
</form> 

在IE8-IE9、Safari中无法兼容dropzone插件，所以会自动生成， 如果纯上传图片是木有影响，但是要加入表单验证就会变成form内嵌套form：

     
     
<form action=''>
       <form action=''>    //目的把这个form去掉；
             <input type='file' />
             <input type='submit' value='aubmit'>
       </form>
<input type='submit' value='submit name='submit''
</form>

首先要先去掉自动生成的submit按钮；

 解决：利用jQuery(document).ready(function($) {} 判断自动生成的元素中是否含有 <input type='submit' value='aubmit'>，有则代表是不兼容该插件的，然后去掉该submit按钮；

然后 去掉自动生成的form标签；

利用jQuery的   unwrap( );

第二步：在兼容的浏览器加验证

通过上面的修改form表单已经正常；

验证像input type='text'那种较为简单，而是如何让插件只有当条件满足才执行插件（方法如下代码）；

      
      
<script>  
  Dropzone.autoDiscover = false;             // 禁止对所有元素的自动查找； 
  var dropz = new Dropzone("#file",{         //这样设置后，然后在满足条件的写成这样既能调用 dropz.processQueue();
        url: "upload-file.php",
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100, //并行上传文件数量
        maxFiles: 1,
        addRemoveLinks:true,
        maxFilesize: 200, //单位MB
        acceptedFiles:'.mov , .mp4'
        init: function() { //document初始化时调用的事件；
              var myDropzone = this;
              this.on("addedfile", function () {
              });
              this.on("removedfile", function () {
              });
              this.on("complete", function(file) {
              });
          }
    });
</script>

再到每个浏览器间如何判断上传文件是否为空：

一、IE7 - IE9 ：通过标签input  type='file' 的value 是否为空来判断；利用原生获取document.getElementById("fileNum").value.length;  fileNum为文件标签ID值

二、Safari ：通过document.getElementById('fileNum').files==0  判断；

三、Firefox、chrome通过jQuery判断框内是否含有某个class类来判断；

注意：想要获取Safari文件个数只能通过JS，但是file标签没有ID属性，所以通过jQuery后添加再用JS选择到该file标签；

第三步：数据载入数据库：分为 图片上传URL 与 数据的插入；

一、由于插件只能纯上传图片，无法上传数据，所以单独一个php文件插入数据（包括插入图片url）；

二、低版本上传图片无法判断图片类型与文件名，要使用前端split()截取，后台截取前貌似没有“\”，无法判断文件名与类型；

plupload

参考地址：http://www.phpin.net/tools/plupload/

特点：1.兼容Firefox、chrome、Safari、IE6（低版本则采用传统的swf）

           2.主要特点不采用form表单直接使用，可以一次上传多个文件，可点击可拖动；

缺陷：点击上传按钮延迟弹出选择框。不友好；

使用方式：

Html:

<div id="container">

        <a id="uploadify" class="fileName ">请选择上传文本</a>

        <input type="button" class="btn_upload" value="上传" />

        <label class="filetTie" style="float:none;" title='展示错误信息'></label>

</div>

JavaScript：

   
   
var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',  //官网上默认是gears,html5,flash,silverlight,browserplus
    browse_button : 'uploadify', 
    container: 'container',                                                   
    url : 'upload-textfile.php' ,
    multi_selection: false,                                  
    flash_swf_url : 'http://localhost/basic_boostarp_video_website/js/plupload/Moxie.swf',       //兼容低版本上传文件选择框
    silverlight_xap_url:'http://localhost/basic_boostarp_video_website/js/plupload/Moxie.xap',   //兼容低版本上传文件选择框
    filters : {
      mime_types: [
        {title : "Image files", extensions : "txt,xls,xlsx,doc,docx,ppt,pptx,pdf,"},
        {title : "Zip files", extensions : "zip"}
      ]
    },
    max_file_size : '2mb', //最大只能上传400kb的文件(格式100b, 10kb, 10mb, 1gb)
    prevent_duplicates : true, //不允许选取重复文件
    init: {
      PostInit:function(uploader){
        $(".btn_upload").on("click",function(){
            if($(".text_file").length>0){
              $(".filetTie").text("");
              uploader.start(); 
            }else{
              $(".filetTie").text("请选择文件");
              return false;
            }
        })
      },
      FilesAdded:function(uploader,files){
          var p='';
          $(".filetTie").text(""); //把下面错误信息在文件加入时就清空；
          if($(".text_file>p").length>0){
                swal({
                          title: "ERROR",
                          text:  "只能上传一个文件",
                          type:  "error",
                          confirmButtonColor: "#b3b3b3", 
                    });
          }else{
            plupload.each(files, function(file){                 //遍历所有上传到列表内的文件；
              p += "<div class='text_file'><input type='hidden' name='uploadify_hideText' class='uploadify_hideText' value='"+file['name']+"'><p id='" + file['id'] + "'>"+file['name']+"("+plupload.formatSize(file['size'])+")"+"<span class='btn_delete' btnid='"+ file['id'] +"'>DELETE</span></p><div class='progress' style='display:none;'><span class='bar'></span><span class='percent'>上传中 0%</span></div></div>"; 
            })
            $("#container > div.col-md-3").append(p);
            btnDelete(uploader); //异步获取的再加载删除函数；
          }
      },
      UploadProgress:function(uploader,file){
        $(".progress").css('display', 'block');
        var percent = file.percent;  
        $("#" + file.id).next(".progress").children('.bar').css({"width": percent + "%"});  
        $("#" + file.id).next(".progress").children('.percent').text("上传"+percent + "%"); 
      },
      Error:function(uploader,errObject){ 
        if(errObject.code==-601){
            $(".filetTie").text("请上传文档类型（txt、doc、xls、pdf）");
            return false;
        }else if(errObject.code==-600){
            $(".filetTie").text("请上传小于2MB的文档");
            return false;
        }
      }
    }
});
    uploader.init();                //必加设置,插件初始化;
    function btnDelete(obj){
      $(".btn_delete").on("click",function(){
        $(this).parents(".text_file").remove();
        var toremove = '';
        var btnid = $(this).attr("btnid");
        for(var i in obj.files){             //这里是实际把对象文件删除的;i（表示索引）获得files中对应的file
            if(obj.files[i].id === btnid){
              toremove = i;
              obj.files.splice(toremove, 1); //splice(添加/删除项目的位置,删除的项目数量);
            }   
        }
      })
    } 

uploadify

参考地址：http://www.cnblogs.com/yangy608/p/3915349.html 

特点：1.兼容Firefox、chrome、Safari、IE6（低版本则采用传统的swf）

           2.主要特点不采用form表单直接使用，上传完毕展示图片，可以一次上传多个文件，可点击可拖动；

引用文件：

HTML:

   
   
<input type="file" name="uploadify" id="uploadify" />
<div class="btn-group">
    <a class="btn btn-xs btn-default upload-start disabled" href="javascript:$('#uploadify').uploadify('upload','*')">开始上传
    <a class="btn btn-xs btn-default upload-clear disabled" href="javascript:$('#uploadify').uploadify('cancel', '*')">清空队列</a>
</div>
<div id="imgList">
    <ul></ul>
</div>

JS:

   
   
<?php $timestamp = time(); ?>  //获取当前时间戳通过插件传给后端做判断

$("#uploadify").uploadify({
    //插件是用swf方式上传文件
    'swf': 'js/plugins/uploadify/uploadify.swf',
    //后台处理的页面
    'uploader': 'js/plugins/uploadify/uploadify.php',
    'buttonClass': 'btn btn-xs btn-primary',
    //按钮显示的文字
    'buttonText': '广告信息',
    //显示的高度和宽度，默认 height 30；width 120
    'height': 30,
    'width': 80,
    //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
    //在浏览窗口底部的文件类型下拉菜单中显示的文本
    'fileTypeDesc': 'Image Files',
    //允许上传的文件后缀
    'fileTypeExts': '*.gif; *.jpg; *.png',
    //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
    //'queueID': 'fileQueue',
    //选择文件后自动上传
    'auto': false,
    //设置为true将允许多文件上传
    'multi': false,
     //发送给后台的其他参数通过formData指定
     //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
    'formData'     : {
        'timestamp' : '<?php echo $timestamp; ?>',                       //定义当前时间戳为参数传给后端
        'token'     : '<?php echo md5('unique_salt' . $timestamp); ?>'
    },
    'onSelect' : function(file){                                         //当每次选中文件后触发
        $("#upfileMessage").text("");
        if(file.name) $('.upload-start , .upload-clear').removeClass('disabled');
    },
    'onSelectError' : function(file, errorCode, errorMsg){               //当每次选择错误文件后触发
        $("#upfileMessage").text(file + errorMsg)
    },
    'onQueueComplete' : function(queueData){                             //当所有文件上传完毕后触发展示状态数据
        //console.log(queueData)
    },
    'onUploadSuccess':function(file,data,response){                      //每个文件上传成功后触发
        //该插件是一个接着一个上传，所以实现多缩略图展示只需要在规定的位置后面插入即可；
        var obj = JSON.parse(data);  //转为JSON格式
        var $ul = $("#imgList ul");  
        var $img = $("#imgList ul > li > img");
        
        $ul.append('<li><img src="uploads/' + obj.name + '" class="img-thumbnail" /></li>'); //文件上传完成显示缩略图
        if(obj.status){
            //console.log('load success');
            $ul.children('li').append('<span class="uploadSuccess"><i class="fa fa-check-circle"></i></span>');
        }
    }
});

PHP

uploadify.php

   
   
<?php
//设置存放文件的目录
$targetFolder = '/uploads';
$fileName = $_FILES['Filedata']['name'];
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
//通过从前端获取的时间戳判断当前文件是否超时再往下执行
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
	$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
	// Validate the file type
	$fileTypes = array('jpg','jpeg','gif','png');
	$fileParts = pathinfo($_FILES['Filedata']['name']);
	//判断是否符合上传类型/格式/大小
	if (in_array($fileParts['extension'],$fileTypes)) {
		move_uploaded_file($tempFile,$targetFile);
		$data=array('status' => 1 ,'name' => $fileName);  
		echo json_encode($data,JSON_UNESCAPED_UNICODE); 
	} else {
		echo 'Invalid file type.';
	}
}
?>

以上三个插件的code基本拥有上传文件类型限制，大小限制、上传交互、进度条等常用效果；

第一个插件Dropzone更适合图片上传，而文件可能不太适合。因为对于结合form使用比较繁琐；

第二个插件plupload兼容性不错，也挺方便，但是有个比较严重用户体验问题，就是点击上传文件按钮响应稍慢且上传完成后的图片不能展示；

本人建议使用第三个插件uploadify，从兼容性，独立性，轻量级，上传类型都比较适合。而且完成后可以显示图片；