引入css
<link rel="stylesheet" href="/assets/dropzone/dropzone.css">
引入js
<script src="/assets/dropzone/dropzone.js"></script>
<div class="card">
<div class="card-header">
<h2 class="card-title">程序上传</h2>
<small class="card-subtitle">更新程序上传.</small>
</div>
<div class="card-block">
<form class="dropzone dz-clickable" action="/admin/sen/updateprogram/uploadTxt"
method="POST"
enctype="multipart/form-data">
<div class="fallback">
<input name="file" type="file" multiple/>
</div>
<button id="upload_btn" type="button" class="btn hide btn-secondary btn--icon-text waves-effect"
style="display: none"><i
class="zmdi zmdi-check"></i> 上传
</button>
</form>
</div>
</div>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
var myDropzone = new Dropzone(".dropzone", {
acceptedFiles: ".txt",
dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.txt",
autoProcessQueue: false,
init: function () {
var submitButton = document.querySelector("#upload_btn")
myDropzone = this;
submitButton.addEventListener("click", function () {
myDropzone.processQueue();
var uploadBtn = $("#upload_btn");
uploadBtn.val("正在上传,请稍候...");
});
this.on("addedfile", function () {
$(submitButton).show();
$("#upload_btn").removeAttr("disabled");
});
},
success: function (file, ret) {
if (ret.state == "ok") {
showMsg(0, ret.msg);
$.pjax({url: "/admin/sen/updateprogram", container: "#pjax-container"});
} else {
showMsg(3, ret.msg);
var uploadBtn = $("#upload_btn");
uploadBtn.val("上传");
uploadBtn.attr("disabled", false);
}
}
});
});
</script>
网上写的大同小异,没有符合项目要求,整理了一下。