如何设计 Django 的文件选择器表单按钮的样式？

Question

我正在尝试设置我的 Django 文件上传按钮 的样式，但是由于它是通过表单处理的并且没有明确写入模板中的 HTML 我无法设置样式它直接用 HTML 和 CSS 就像我可以为输入类型的其他按钮一样。

我试图在我的 forms.py 中添加我的 CSS class，但它将普通的默认 Django 文件上传按钮放在我的 CSS 之上样式按钮。

我的代码如下：

class FileUploadForm(forms.Form):
    docFile = forms.FileField(
        label = "Select a CSV file",
    )

    class Meta:
        model = FileUpload
        fields = ('docFile')

    def __init__(self, *args, **kwargs):
        super(FileUploadForm, self).__init__(*args, **kwargs)
        self.fields['docFile'].widget.attrs.update({'class': 'my_class'})

我也试过在我的 Meta class 中定义一个 widget 像这样：

class Meta:
        model = FileUpload
        widgets = {
            'docFile': forms.FileInput(attrs={'class': 'my_class'}),
        }

但这与我第一次尝试的效果相同。

是否有不同的方法来完成此操作，或者您是否可以在我的代码中发现一些逻辑错误？

Answer 1

如果您想为文件上传按钮设置样式，请定义另一个按钮或 link 并为其设置样式。然后设置它的点击事件触发文件上传按钮。

HTML:

<div>
    <a id="browse" class="my_class">Browse</a>
    <input type="file" name="data" style="display: none" />
</div>

Javascript:

$('#browse').click(function(){
    $(this).parent().find('input').click();
});

要以 Django 形式完成这项工作，您可以通过 widget.

Answer 2

为了后代，这里是我使用 Bootstrap here.

找到的解决方案

.fileUpload {
 position: relative;
 overflow: hidden;
 margin: 10px;
}
.fileUpload input.upload {
 position: absolute;
 top: 0;
 right: 0;
 margin: 0;
 padding: 0;
 font-size: 20px;
 cursor: pointer;
 opacity: 0;
 filter: alpha(opacity=0);
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

如何设计 Django 的文件选择器表单按钮的样式？

How can you style Django's file picker form button?

html

css

python

django