Dropzone带进度显示多文件上传插件

插件效果

默认状态 

选中文件

上传进度

插件下载，网盘链接

插件调用示例

<link rel="stylesheet" type="text/css" href="dropzone/dropzone.css">
<script type="text/javascript" src="dropzone/dropzone.js"></script>
<style type="text/css">
#upload-form {
    min-height: 200px;
    width: 800px;
    margin-right: -810px;
    margin-bottom: 30px;
    display: inline-block;
}
#upload-form #uploadBtn {
    position: absolute;
    top: 2px;
    right: -294px;
    font-family: "方正舒体";
    font-size: 40px;
    width: 276px;
    height: 80px;
    cursor: pointer;
}	
</style>


<form id="upload-form" action="upload.php" class="dropzone">
    <button id="uploadBtn" class="btn btn-success"> 确 认 上 传 </button>
</form>


<script type="text/javascript">
/* Dropzone上传插件配置 */
Dropzone.options.uploadForm = {
    paramName: "signimage", //上传字段名
    maxFilesize: 2, // MB
    acceptedFiles: ".jpg,.jpeg,.png,.gif,.bmp",
    addRemoveLinks: true,
    clickable: true,
    autoProcessQueue: false, //关闭自动上传, 手动调度
    uploadMultiple: true,
    parallelUploads: 10, //最大并行处理量
    maxFiles: 100, //最大上传数量
    
    /* 插件消息翻译 */
    dictDefaultMessage: '<i class="fa fa-cloud-upload"></i>拖拉文件上传<br />或 <i class="fa fa-thumbs-down"></i>点此上传',
    dictInvalidFileType: '只支持图片文件上传',
    dictFileTooBig: '图片超出最大2M约束',
    dictMaxFilesExceeded: '超出最大上传数量',
    dictCancelUpload: '取消上传',
    dictRemoveFile: '去除文件',
    dictCancelUploadConfirmation: '确认取消上传',

    /* 上传缩略图预览模板 */
    previewTemplate: '  \
                        <div class="dz-preview dz-file-preview">    \
                          <div class="dz-details">  \
                            <div class="dz-filename"><span data-dz-name></span></div>   \
                            <div class="dz-size" data-dz-size></div>    \
                            <img data-dz-thumbnail />   \
                          </div>    \
                          <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> \
                          <div class="dz-success-mark"><span>✔</span></div> \
                          <div class="dz-error-mark"><span>✘</span></div>   \
                          <div class="dz-error-message"><span data-dz-errormessage>""</span></div>  \
                        </div>  \
                     ',

    /* 初始化期间注册一些事件处理句柄 */
    init: function(){
        var self = this;

        /* 点击上传按钮开始ajax上传 */
        this.element.querySelector("button#uploadBtn").addEventListener("click", function(e) {
          e.preventDefault();
          e.stopPropagation();
          self.processQueue();
        });

        /* 上传成功后 */
        this.on("successmultiple", function(files, response) {
            $('#upload-form #uploadBtn').tooltip({
                title: response.info,
                trigger: 'manual',
                container: '#uploadBtn', //该行解决了一个排版问题
            }).tooltip('show');

            /* 刷新页面 */
            setTimeout(function(){
                window.location = response.url || window.location;
            }, 1200);
        });

        this.on("error", function(file, errorMessage){
            $(file.previewElement).find('[data-dz-errormessage]').html(errorMessage);
        });
    },
};
</script>