[英]How can I style the filefield button on django?
I have been trying to style the filefield upload button but since it is run on the forms.py and not on the html, even with ours of investigation, I still don't know how to do it.我一直在尝试设置文件字段上传按钮的样式,但由于它是在 forms.py 而不是 html 上运行的,即使经过我们的调查,我仍然不知道该怎么做。 Is there any way I can style the button?
有什么办法可以设置按钮的样式吗? Well the goal is trying to have an icon instead of a button.
好吧,目标是尝试使用图标而不是按钮。
models.py模型.py
class Post(models.Model):
text = models.CharField(max_length=200)
posti = models.ImageField(upload_to='media/images', null=True, blank="True")
user = models.ForeignKey(User, related_name='imageuser', on_delete=models.CASCADE, default=2)
forms.py (I am missing the posti = form.ImageField under the text variable) forms.py(我在文本变量下缺少 posti = form.ImageField)
class PostForm(forms.ModelForm):
text = forms.CharField(widget=forms.TextInput(
attrs={
'class': 'form-control',
'placeholder': 'Add a comment...'
}
))
class Meta:
model = Post
fields = ('text', 'posti')
exclude = ['author']
uploadimage.html (It posts the image on the imagelist view) uploadimage.html (它在图像列表视图上发布图像)
<div class="container" style="margin-top: 200px; margin-left:50px;">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div id="formtext" class="overflow-hidden" type="input">{{ form.text }}</div>
<div id="formimage" class="overflow-hidden" type="button">{{ form.posti }}</div>
<button type="submit" class="btn btn-primary mb-2">submit</button>
</form>
</div>
class PostForm(forms.ModelForm):
class Meta:
model = Post
fields = ('text', 'posti')
exclude = ['author']
widgets = {
'text': forms.TextInput(attrs={
'class': 'form-control',
'placeholder': 'Add a comment...'
}),
}
I have found an answer to my problem well I just added some javascript that fixed my problem.我已经很好地找到了我的问题的答案,我刚刚添加了一些 javascript 来解决我的问题。
<style>
#custom-button {
background: rgba(222, 184, 135, 0);
border-radius: 10px;
cursor: pointer;
border: 0px;
}
#custom-button:hover {
background: rgba(13, 177, 40, 0.226);
border-radius: 10px;
cursor: pointer;
border: 0px;
}
#custom-text {
display: None;
}
</style>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="text" name="text" class="form-control" placeholder="Add a comment..." required="" id="id_text">
<input type="file" hidden="hidden" name="posti" accept="image/*" id="id_posti">
<button type="button" id="custom-button"><i class="far fa-image"></i></button>
<span id="custom-text">no file choosen, yet</span>
<button type="submit" class="btn btn-primary mb-2">submit</button>
</form>
<script type="text/javascript">
const realFileBtn = document.getElementById("id_posti");
const customBtn = document.getElementById("custom-button");
customBtn.addEventListener("click", function() {
realFileBtn.click();
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.