Question

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

我试图在我的forms.py中添加我的CSS类，但是它将香草默认的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'})

我还尝试在widget类中定义Meta，如下所示：

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

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

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

Answer 1

为了后人的缘故，这里是我使用Bootstrap here找到的解决方案。

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 2

如果要设置文件上传按钮的样式，请定义另一个按钮或链接和样式。然后设置它的click事件以触发文件上传按钮。

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进行此操作。

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

2 个答案: