动态更新Dropzone maxFiles设置 [英] Dynamically update Dropzone maxFiles setting
问题描述
Dropzone.options.dropzone = {
uploadMultiple: false,
maxFiles: {{ imagecount }},
maxFilesize: 2, // MB
dictFileTooBig: "That image is too large. We only allow 2MB or smaller.",
acceptedFiles: ".jpeg, .jpg",
init: function () {
this.on("success", function(file, response) {
$('.uploaded-photos').append('<div><img src="' + response.link + '"height="150" class="photo" id="' + response.id + '"/><span class="delete-photo">Delete</span></div>');
$('.uploaded-photos').justifiedGallery('norewind')
this.removeFile(file);
var grabNewCount = parseInt($('.recordcount').text(), 10)
$('.recordcount span').text(grabNewCount += 1);
});
}
};
每次尝试上传/删除新图像时，我都试图动态更新MaxFiles属性.
如您所见，页面加载时，我正在从服务器传递{{ imagecount }}.这只是一项检查，以查看为用户上传了多少图像，从而计算出还剩下多少图像要上传.在首页加载时有效.
当我删除使用AJAX进行处理的图像时，似乎会出现问题.我似乎无法获取该maxFiles值进行更新.如果我最初允许10张图像，而用户当前上传了5张图像，并且删除了1张图像，那么新的maxFiles值现在应该为6，但是我似乎对动态更新该值没有任何影响.这是我要删除的代码:
$('.delete-photo').click(function() {
$(this).text('') // remove "delete" text from button
$(this).html('<i class="fa fa-spinner fa-spin"></i>') // add spinning icon to indicate "working"
var csrf = $('[name=csrfmiddlewaretoken]').val();
$.ajax({
context: this,
type: "POST",
url: '/delete-photo/',
data: {'csrfmiddlewaretoken': csrf, 'id': $(this).parent().attr('id') },
dataType: "json",
timeout: 10000,
cache: false,
success: function(data, textStatus, XMLHttpRequest){
var image = $(this).parent();
$(image).fadeOut(800, function() {
$(this).remove();
$('.uploaded-photos').justifiedGallery()
});
Dropzone.options.dropzone.maxFiles = Dropzone.options.dropzone.maxFiles + 1;
var grabNewCount = parseInt($('.recordcount').text(), 10)
$('.recordcount span').text(grabNewCount -= 1);
}
});
});
因此您可以看到我有Dropzone.options.dropzone.maxFiles = Dropzone.options.dropzone.maxFiles + 1;试图获取当前的maxFiles值并更新值+1，但这无济于事.
有什么想法吗?
因此，通过将数据属性添加到form标记并在每次删除或上传新图像时使用新编号更新该属性，我可以完成这项工作./p>
我的服务器端代码将初始maxfiles({{imagecount}}标签)计数返回到加载时的页面:
<form data-count="{{ imagecount }}">
所以我的开头dropzone代码如下:
var maxFiles = $('.dropzone').attr('data-count');
Dropzone.options.dropzone = {
uploadMultiple: false,
maxFiles: maxFiles,
当某人通过dropzone上传图像时，在.on(success)函数内部，我有:
var imagecount = $('.dropzone').attr('data-count');
imagecount = imagecount - 1;
$('.dropzone').attr('data-count', imagecount);
在删除ajax函数内部，我具有:
var imagecount = $('.dropzone').attr('data-count');
imagecount = imagecount + 1;
$('.dropzone').attr('data-count', imagecount);
Dropzone.options.dropzone = {
uploadMultiple: false,
maxFiles: {{ imagecount }},
maxFilesize: 2, // MB
dictFileTooBig: "That image is too large. We only allow 2MB or smaller.",
acceptedFiles: ".jpeg, .jpg",
init: function () {
this.on("success", function(file, response) {
$('.uploaded-photos').append('<div><img src="' + response.link + '"height="150" class="photo" id="' + response.id + '"/><span class="delete-photo">Delete</span></div>');
$('.uploaded-photos').justifiedGallery('norewind')
this.removeFile(file);
var grabNewCount = parseInt($('.recordcount').text(), 10)
$('.recordcount span').text(grabNewCount += 1);
});
}
};
I'm trying to dynamically update the MaxFiles property each time a new image is uploaded/deleted.
As you can see, I'm passing {{ imagecount }} from my server when the page loads. This is just a check to see how many images have been uploaded for the user and thus a calculation for how many they have left to upload. On first page load, this works.
The problem seems to arise when I delete an image which I'm using AJAX to do. I can't seem to get that maxFiles value to update. If I allow 10 images initially and a user has 5 currently uploaded and deletes one, then the new maxFiles value should now be 6, but nothing I do seems to have an effect on updating that value dynamically. Here's what I have for my delete code:
$('.delete-photo').click(function() {
$(this).text('') // remove "delete" text from button
$(this).html('<i class="fa fa-spinner fa-spin"></i>') // add spinning icon to indicate "working"
var csrf = $('[name=csrfmiddlewaretoken]').val();
$.ajax({
context: this,
type: "POST",
url: '/delete-photo/',
data: {'csrfmiddlewaretoken': csrf, 'id': $(this).parent().attr('id') },
dataType: "json",
timeout: 10000,
cache: false,
success: function(data, textStatus, XMLHttpRequest){
var image = $(this).parent();
$(image).fadeOut(800, function() {
$(this).remove();
$('.uploaded-photos').justifiedGallery()
});
Dropzone.options.dropzone.maxFiles = Dropzone.options.dropzone.maxFiles + 1;
var grabNewCount = parseInt($('.recordcount').text(), 10)
$('.recordcount span').text(grabNewCount -= 1);
}
});
});
So you can see that I've got Dropzone.options.dropzone.maxFiles = Dropzone.options.dropzone.maxFiles + 1; in an attempt to take the current maxFiles value and update the value +1 but that doesn't do anything.
Any ideas?
So I got this working by adding a data attribute to the form tag and updating that attribute with a new number each time a new image is deleted or uploaded.
My server side code passes the initial maxfiles ({{imagecount}} tag) count back to the page on load:
<form data-count="{{ imagecount }}">
So my opening dropzone code looks like:
var maxFiles = $('.dropzone').attr('data-count');
Dropzone.options.dropzone = {
uploadMultiple: false,
maxFiles: maxFiles,
When someone uploads an image via dropzone, inside the .on(success) function I have:
var imagecount = $('.dropzone').attr('data-count');
imagecount = imagecount - 1;
$('.dropzone').attr('data-count', imagecount);
And inside of the delete ajax function I have:
var imagecount = $('.dropzone').attr('data-count');
imagecount = imagecount + 1;
$('.dropzone').attr('data-count', imagecount);
这篇关于动态更新Dropzone maxFiles设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
