xwsg/dropzoneDemo.html

## dropzoneDemo.html

<html lang=zh-CN>
<head>
    <title>Dropzonejs Demo</title>
    <meta charset=utf-8>
    <meta name="decorator" content="default"/>
    <script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/dropzone/5.1.0/min/dropzone.min.js"></script>
    <link href="https://cdn.bootcss.com/dropzone/5.1.0/min/dropzone.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/2.3.0/css/bootstrap.min.css">
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        #actions {
            margin: 2em 0;
        }

        div.table .file-row > div {
            /*display: table-cell;*/
            vertical-align: top;
            border-top: 1px solid #ddd;
            padding: 8px;
        }

        div.table .file-row:nth-child(odd) {
            background: #f9f9f9;
        }

        /* The total progress gets shown by event listeners */
        #total-progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }

        /* Hide the progress bar when finished */
        #previews .file-row.dz-success .progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }

        /* Hide the delete button initially */
        #previews .file-row .delete {
            display: none;
        }

        /* Hide the start and cancel buttons and show the delete button */

        #previews .file-row.dz-success .start,
        #previews .file-row.dz-success .cancel {
            display: none;
        }

        #previews .file-row.dz-success .delete {
            display: block;
        }

        button {
            -webkit-user-modify: read-only;
        }
        .error {
            color: #ec1c1c;
        }
        .name {
            word-break: break-all;
        }

    </style>
</head>
<body>

<!-- HTML heavily inspired by http://blueimp.github.io/jQuery-File-Upload/ -->
<div class="container-fluid">
<div id="actions" class="row-fluid">

    <div class="span7">
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button dz-clickable">
            <i class="icon-plus"></i>
            <span>添加文件...</span>
        </span>
        <button type="submit" class="btn btn-primary start">
            <i class="icon-upload"></i>
            <span>开始上传</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="icon-remove"></i>
            <span>取消上传</span>
        </button>
    </div>

    <div class="span5">
        <!-- The global file processing state -->
        <div class="fileupload-process">
            <div id="total-progress" class="progress progress-striped active"
                 role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="bar" style="width:0;" data-dz-uploadprogress></div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="table container-fluid files" id="previews">
    <div id="template" class="file-row row-fluid">
        <div class="span2">
            <span class="preview"><img src="https://avatars0.githubusercontent.com/u/5007986?v=3&s=88"
                                       width="80" data-dz-thumbnail/></span>
        </div>
        <div class="span5">
            <p class="name" data-dz-name></p>
            <strong class="error text-danger" data-dz-errormessage></strong>
        </div>
        <div class="span2">
            <p class="size" data-dz-size></p>
            <div class="progress progress-success progress-striped active" role="progressbar"
                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="bar" style="width:0;" data-dz-uploadprogress></div>
            </div>
        </div>
        <div class="span3">
            <button class="btn btn-primary start">
                <i class="icon-upload"></i>
                <span>开始</span>
            </button>
            <button data-dz-remove class="btn btn-warning cancel">
                <i class="icon-remove"></i>
                <span>取消</span>
            </button>
            <button data-dz-remove class="btn btn-danger delete">
                <i class="icon-trash"></i>
                <span>删除</span>
            </button>
        </div>
    </div>

</div>

<script type="text/javascript">

    // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        url: "http://localhost:8080/gw/upload", // Set the url
        paramName: "file_data",
        filesizeBase: 1024,
        maxFilesize: 2048,
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        maxFiles: 5,
        // acceptedFiles: ".zip",
        parallelUploads: 5,
        previewTemplate: previewTemplate,
        addRemoveLinks: false,
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
        dictDefaultMessage: "选择文件",
        dictMaxFilesExceeded: "上传文件个数超出限制，最多选择5个文件！",
        dictInvalidFileType: "不支持的文件类型，必须为zip格式文件！",
        dictResponseError: "服务器异常{{statusCode}}， 文件上传失败！",
        dictFileTooBig: "文件大小超出限制，最大为{{maxFilesize}}MB！",
        dictCancelUploadConfirmation: "是否取消当前上传任务？"
    });

    myDropzone.on("addedfile", function (file) {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function () {
            myDropzone.enqueueFile(file);
        };
    });

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function (progress) {
        document.querySelector("#total-progress .bar").style.width = progress + "%";
    });

    myDropzone.on("sending", function (file) {
        document.querySelector("#total-progress").style.opacity = "1";
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    });

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queuecomplete", function (progress) {
        document.querySelector("#total-progress .bar").style.width = "0";
        document.querySelector("#total-progress").style.opacity = "0";
    });

    myDropzone.on("complete", function(file) {
        document.querySelector("#total-progress .bar").style.width = "0";
        document.querySelector("#total-progress").style.opacity = "0";
    });
    myDropzone.on("success", function (file, responseText) {
        file.previewElement.querySelector(".name").innerHTML = responseText.datas.path;
    });

    myDropzone.on("error", function (file, errorMessage) {
        if (errorMessage.status >= 400) {
            errorMessage = "服务器异常，文件上传失败！";
        }
        file.previewElement.querySelector('.error').innerHTML = errorMessage;
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
        file.previewElement.querySelector('.progress .bar').style.backgroundColor = "#ec1c1c";
    });

    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function () {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    };

    document.querySelector("#actions .cancel").onclick = function () {
        myDropzone.removeAllFiles(true);
    };
</script>
</body>
</html>

	<html lang=zh-CN>
	<head>
	<title>Dropzonejs Demo</title>
	<meta charset=utf-8>
	<meta name="decorator" content="default"/>
	<script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/dropzone/5.1.0/min/dropzone.min.js"></script>
	<link href="https://cdn.bootcss.com/dropzone/5.1.0/min/dropzone.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/2.3.0/css/bootstrap.min.css">
	<style>
	html, body {
	width: 100%;
	height: 100%;
	}

	#actions {
	margin: 2em 0;
	}

	div.table .file-row > div {
	/display: table-cell;/
	vertical-align: top;
	border-top: 1px solid #ddd;
	padding: 8px;
	}

	div.table .file-row:nth-child(odd) {
	background: #f9f9f9;
	}

	/* The total progress gets shown by event listeners */
	#total-progress {
	opacity: 0;
	transition: opacity 0.3s linear;
	}

	/* Hide the progress bar when finished */
	#previews .file-row.dz-success .progress {
	opacity: 0;
	transition: opacity 0.3s linear;
	}

	/* Hide the delete button initially */
	#previews .file-row .delete {
	display: none;
	}

	/* Hide the start and cancel buttons and show the delete button */

	#previews .file-row.dz-success .start,
	#previews .file-row.dz-success .cancel {
	display: none;
	}

	#previews .file-row.dz-success .delete {
	display: block;
	}

	button {
	-webkit-user-modify: read-only;
	}
	.error {
	color: #ec1c1c;
	}
	.name {
	word-break: break-all;
	}

	</style>
	</head>
	<body>

	<!-- HTML heavily inspired by http://blueimp.github.io/jQuery-File-Upload/ -->
	<div class="container-fluid">
	<div id="actions" class="row-fluid">

	<div class="span7">
	<!-- The fileinput-button span is used to style the file input field as button -->
	<span class="btn btn-success fileinput-button dz-clickable">
	<i class="icon-plus"></i>
	<span>添加文件...</span>
	</span>
	<button type="submit" class="btn btn-primary start">
	<i class="icon-upload"></i>
	<span>开始上传</span>
	</button>
	<button type="reset" class="btn btn-warning cancel">
	<i class="icon-remove"></i>
	<span>取消上传</span>
	</button>
	</div>

	<div class="span5">
	<!-- The global file processing state -->
	<div class="fileupload-process">
	<div id="total-progress" class="progress progress-striped active"
	role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
	<div class="bar" style="width:0;" data-dz-uploadprogress></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="table container-fluid files" id="previews">
	<div id="template" class="file-row row-fluid">
	<div class="span2">
	<span class="preview"><img src="https://avatars0.githubusercontent.com/u/5007986?v=3&s=88"
	width="80" data-dz-thumbnail/></span>
	</div>
	<div class="span5">
	<p class="name" data-dz-name></p>
	<strong class="error text-danger" data-dz-errormessage></strong>
	</div>
	<div class="span2">
	<p class="size" data-dz-size></p>
	<div class="progress progress-success progress-striped active" role="progressbar"
	aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
	<div class="bar" style="width:0;" data-dz-uploadprogress></div>
	</div>
	</div>
	<div class="span3">
	<button class="btn btn-primary start">
	<i class="icon-upload"></i>
	<span>开始</span>
	</button>
	<button data-dz-remove class="btn btn-warning cancel">
	<i class="icon-remove"></i>
	<span>取消</span>
	</button>
	<button data-dz-remove class="btn btn-danger delete">
	<i class="icon-trash"></i>
	<span>删除</span>
	</button>
	</div>
	</div>

	</div>

	<script type="text/javascript">

	// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
	var previewNode = document.querySelector("#template");
	previewNode.id = "";
	var previewTemplate = previewNode.parentNode.innerHTML;
	previewNode.parentNode.removeChild(previewNode);

	var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
	url: "http://localhost:8080/gw/upload", // Set the url
	paramName: "file_data",
	filesizeBase: 1024,
	maxFilesize: 2048,
	thumbnailWidth: 80,
	thumbnailHeight: 80,
	maxFiles: 5,
	// acceptedFiles: ".zip",
	parallelUploads: 5,
	previewTemplate: previewTemplate,
	addRemoveLinks: false,
	autoQueue: false, // Make sure the files aren't queued until manually added
	previewsContainer: "#previews", // Define the container to display the previews
	clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
	dictDefaultMessage: "选择文件",
	dictMaxFilesExceeded: "上传文件个数超出限制，最多选择5个文件！",
	dictInvalidFileType: "不支持的文件类型，必须为zip格式文件！",
	dictResponseError: "服务器异常{{statusCode}}，文件上传失败！",
	dictFileTooBig: "文件大小超出限制，最大为{{maxFilesize}}MB！",
	dictCancelUploadConfirmation: "是否取消当前上传任务？"
	});

	myDropzone.on("addedfile", function (file) {
	// Hookup the start button
	file.previewElement.querySelector(".start").onclick = function () {
	myDropzone.enqueueFile(file);
	};
	});

	// Update the total progress bar
	myDropzone.on("totaluploadprogress", function (progress) {
	document.querySelector("#total-progress .bar").style.width = progress + "%";
	});

	myDropzone.on("sending", function (file) {
	document.querySelector("#total-progress").style.opacity = "1";
	file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
	});

	// Hide the total progress bar when nothing's uploading anymore
	myDropzone.on("queuecomplete", function (progress) {
	document.querySelector("#total-progress .bar").style.width = "0";
	document.querySelector("#total-progress").style.opacity = "0";
	});

	myDropzone.on("complete", function(file) {
	document.querySelector("#total-progress .bar").style.width = "0";
	document.querySelector("#total-progress").style.opacity = "0";
	});
	myDropzone.on("success", function (file, responseText) {
	file.previewElement.querySelector(".name").innerHTML = responseText.datas.path;
	});

	myDropzone.on("error", function (file, errorMessage) {
	if (errorMessage.status >= 400) {
	errorMessage = "服务器异常，文件上传失败！";
	}
	file.previewElement.querySelector('.error').innerHTML = errorMessage;
	file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
	file.previewElement.querySelector('.progress .bar').style.backgroundColor = "#ec1c1c";
	});

	// `clickable` has already been specified.
	document.querySelector("#actions .start").onclick = function () {
	myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
	};

	document.querySelector("#actions .cancel").onclick = function () {
	myDropzone.removeAllFiles(true);
	};
	</script>
	</body>
	</html>