我在django项目中使用Dropzone插件。
我想点击按钮时上传图片。这件事有效。但问题是我想在服务器上成功上传所有文件后触发事件。我通过谷歌搜索尝试了许多解决方案但没有任何作用。
这是我的代码: 的 HTML
<div id="dropzone-div">
<form class = "dropzone" id = "image-form">
{% csrf_token %}
<div class="dropzone-previews"></div>
<input type = "text" name = "album_Id" id = "album_Id" hidden>
<div class="fallback">
<input name="image_file" type="file" multiple="" />
</div>
<input type = "reset" id ="resetImageForm" hidden>
</form>
</div>
<span>
<button class="btn btn-success" id = "upload">Upload</button>
</span>
js代码:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone", {
url: "{% url 'upload' %}",
addRemoveLinks: true,
thumbnailWidth: "80",
thumbnailHeight: "80",
dictCancelUpload: "Cancel",
parallelUploads: 100,
autoProcessQueue: false
});
myDropzone.on("drop", function (event) {
$('.dropzone').animate({
opacity: 1,
top: "-5"
});
});
$("#upload").on('click', function () {
myDropzone.processQueue();
$.ajax({
type: "POST",
url: "{% url 'getPhoto' %}",
dataType: "json",
async: true,
data: {
album_Id_1:$("#album_Id").val()
},
success: function (json_data) {
alert(json_data)
}
});
});
views.py代码:
#module for uploading images
@csrf_exempt
def uploadImages(request):
try:
if request.session['member_id'] is not None:
if request.method == "POST":
album_Id = request.POST.get('album_Id','')
files = request.FILES.getlist('file')
for filename in files:
save_image = AlbumPhotos(photo=filename, albumPhoto_id=album_Id)
save_image.save()
data = {'status':'true'}
return HttpResponse(json.dumps(data), content_type="application/json")
except KeyError:
pass
return redirect('/')
#module for counting photos in current album
@csrf_exempt
def getPhotoCount(request):
if request.session['member_id'] is not None:
if request.method == "POST":
response = {}
album_Id = request.POST.get('album_Id_1','')
countPhotos = AlbumPhotos.objects.filter(albumPhoto_id=album_Id).count()
print("_______",countPhotos)
response['count'] = countPhotos
return HttpResponse(json.dumps(response), content_type="application/json")
#except KeyError:
# pass
#return redirect('/')
事情是所有文件都成功上传。但我想计算上传的文件数量。为此,我想在服务器上传所有文件时触发另一个功能。如何解决这个问题。请回答。
答案 0 :(得分:1)
为此使用变量并在每个成功上传的文件
上更新它 var myDropzone = new Dropzone(".dropzone", {
[...] // all the other settings
uploadedFile: 0,
});
myDropzone.on("success", function (event) {
this.uploadedFile++;
});