Created
June 17, 2017 04:08
-
-
Save xwsg/9b950215628cec1a3b56f35e0c3f4b72 to your computer and use it in GitHub Desktop.
Dropzonejs Demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment