dropzone.js文件上传工具的使用

dropzone.js是一个可预览的上传文件工具，不依赖任何框架（如jQuery），且具有可定制化。实现文件拖拽上传，提供AJAX异步上传功能。

一、下载dropzone.js

        点击下载

二、引入js css文件

<script type="text/javascript" src="plugins/dropzone/dropzone.js"></script>
<script type="text/javascript" src="plugins/dropzone/dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="plugins/dropzone/dropzone.css" />
<link rel="stylesheet" type="text/css" href="plugins/dropzone/dropzone.min.css" />

三、HTML 表单

<form action="orderExcel/export.do" method="post" class="dropzone" name="Form" id="Form" enctype="multipart/form-data">
    <div class="fallback">
    	<input name="file" type="file" multiple />
    </div>
</form>  

<script type="text/javascript">
           $(".dropzone").dropzone({
                   url:'<%=basePath%>orderExcel/export.do', 
                   paramName: "file", 
                   maxFilesize: 10.0, // 上传的文件大小
                   maxFiles:1,//一次性上传的文件数量上限
                   acceptedFiles: ".xls,.xlsx",  
                   addRemoveLinks : true,//添加移除文件
                   autoProcessQueue: true,//不自动上传
                   dictCancelUploadConfirmation:'你确定要取消上传吗？',
                   dictMaxFilesExceeded: "只能上传{{maxFiles}}个文件",
                   dictFileTooBig:"文件过大({{filesize}}MB). 上传文件最大支持: {{maxFilesize}}MB.",
                   dictDefaultMessage :
                   '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> 拖动文件至该处</span> \
                   <span class="smaller-80 grey"></span> <br /> \
                   <i class="upload-icon icon-cloud-upload blue icon-3x"></i>',
                   dictResponseError: '文件上传失败!',
                   dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.xls/*.xlsx。",
                   dictCancelUpload: "取消上传",
                   dictCancelUploadConfirmation: "你确定要取消上传吗?",
                   dictRemoveFile: "移除文件",
                   uploadMultiple:false,
                   init: function() {
                       //上传文件时触发的事件
                	   this.on("addedfile", function(file) { 
                		   //浏览器控制台输出js
                           console.log("File " + file.name + "uploaded");
                        });
                	   //上传文件成功时触发的事件
                       this.on("success", function(file) {
                    	   console.log("File " + file.name + "uploaded");
                       });
                	   //移除文件触发的事件
                       this.on("removedfile", function(file) {
                           console.log("File " + file.name + "removed");
                       });
                   } 
                 }); 
</script>

效果图：