Dropzone的使用

dropzone 官方网站

1. 控件特点：轻量 没有依赖 配置方便
2. 使用方法 直接引css js文件 

<link href="css/plugins/dropzone/basic.css" rel="stylesheet">
<link href="css/plugins/dropzone/dropzone.css" rel="stylesheet">

<script src="js/dropzone.js"></script>

• 引用文件后  自动初始化 class="dropzone"  部件

<form action="/file-upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

•  不用form 直接用div 也可以实现

<div  class="dropzone">
</div>

• 本人的使用案例：

<div   id="uploadfile_zone"  class="dropzone">
    <div class="dz-default dz-message">
        <span> <strong>拖动文件到此区域或者单击选择文件. </strong><br></span>
    </div>    
</div>    
​

• 中间的span 是提示信息

Dropzone.autoDiscover = false; //自己手动初始化
var drop_zone = new Dropzone("#uploadfile_zone", { 
	//paramName: "files",
	url: "uploadfile",     //file upload url
	uploadMultiple: true,  //多个文件
	maxFiles:10,           //一次性上传的文件数量上限10M
    maxFilesize: 20,       //
	//filesizeBase:20480,
	parallelUploads: 100,  //1次行上传100个文件 
	autoProcessQueue:false,//手动上传 非自动 
	//添加上传取消和删除预览图片的链接，默认不添加
    addRemoveLinks: true,  //添加删除链接
    dictResponseError: '文件上传失败!', //提示信息
    dictFallbackMessage:"浏览器不受支持", 
    dictFileTooBig:"文件过大上传文件最大支持.",
    dictInvalidInputType:'文件类型错误',
    init : function() {     
        this.on("success", function(file, res){});
        //删除图片的事件，当上传的图片为空时，使上传按钮不可用状态
        this.on("removedfiles", function () {
            alert('')
        });
    }
})

使用总结：

1、的确轻量。

2、拖动功能 怎么用？好像点击选择用的多些。 

3、上传多个文件时，被file[0]file[1] 折磨的不行 后来只能从request里面取 这点和datatable 分页ajax有点类似