[英]Dropzone.js with form input
這是我的問題:當用戶添加文件時,我想添加輸入,但是當我發送文件時,什么也沒發生,好像我調用了錯誤的函數。 這是我的html / js(這是django模板btw)代碼:
<form id="myDropzone" action="{% url 'import' %}" method="POST" class="dropzone text-center"> <div id="form_import_div"> </div> <div class="fallback"> </div></form>
這是dropzone選項代碼:
<script type="text/javascript">
// using jQuery
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
ask_job_type(csrftoken);
$("#myDropzone").dropzone({
url:"{% url 'dashboard/import' %}",
maxFilesize: 5000,
addRemoveLinks : true,
dictDefaultMessage: "Drop your log files here or click to upload",
dictResponseError: 'Error uploading file!',
autoQueue:false,
autoProcessQueue:false,
maxFiles: 1,
headers: {
'X-CSRFToken': csrftoken
},
init : function() {
var myDropzone = this;
$("#btn_upload").click(function (e) {
e.preventDefault();
myDropzone.processQueue();
});
this.on('sending', function(file, xhr, formData) {
var data = $('#myDropzone').serializeArray();
$.each(data, function(key, el) {
formData.append(el.name, el.value);
});
});
this.on("successmultiple", function(files, response) {
alert("success");
alert(response);
});
this.on("success", function(files, response) {
alert("success");
alert(response);
});
this.on("errormultiple", function(files, response) {
console.log(response);
});
},
success: function (file, response) {
location.reload();
this.removeFile(file); //todo discuter de quoi faire
}
});
</script>
注意:ask_job_type()只是對js DOM文檔函數的調用,該函數添加了所有輸入元素。 我提交的按鈕的ID為“ btn_upload”
我不知道該怎么辦,我看過這樣的教程: https : //gitlab.com/meno/dropzone/wikis/upload-all-files-with-a-button但沒有任何作用
Add these scripts firstly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
//then for dropdown
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown();
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.