![](/img/trans.png)
[英]How can I use a Sekizai javascript block in a Django template filter?
[英]How can i use filepond javascript library in Django template?
简介:我有 Django web 应用程序,允许用户创建帖子。 每个帖子都有多个与该帖子相关联的图像。
我想做什么:我想使用Filepond
javascript 库来删除、添加更多和预览选定的图像。
问题:下面的代码在没有 filepond 库的情况下工作正常,但是如果我尝试使用 filepond 库,表单只会提交没有文件的title input
。
视图.py
class NewsCreateView(CreateView):
form_class = FileForm
template_name = 'create.html'
success_url = '/'
def form_valid(self, form):
post = form.save(commit=False)
post.author = self.request.user
post.save()
for f in self.request.FILES.getlist('filepond'):
FileModel.objects.create(post=post, file=f)
return super().form_valid(form)
创建.html
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
<div class="content">
<div class="row">
<div class="col-md-12">
<div class="hpanel" style="margin-top: 10px;">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<input type="text" id="id_title" name="title" class="form-control">
<input type="file" id="id_file" name="file" multiple="true">
</div>
<button class=" btn btn-success btn-block" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script>
FilePond.registerPlugin(
FilePondPluginImagePreview
);
FilePond.create(
document.querySelector('input[type="file"]')
);
</script>
无法设置文件输入值,请参阅: https://pqina.nl/blog/the-trouble-with-editing-and-uploading-files-in-the-browser/
所以 FilePond 不会更新现有的文件输入。
您要么必须通过设置 FilePond server
属性来异步上传文件,要么使用 Filepond 文件编码插件将文件编码为 base64 数据,该数据可以作为字符串发送到服务器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.