Djangoのファイルピッカーフォームボタンをどのようにスタイルできますか？

Question

私のDjango ファイルのアップロードボタンのスタイルを変更しようとしていますが、フォームを通して処理され、テンプレート内のHTMLに明示的に記述されていないため、他のボタンのようにHTMLやCSSで直接スタイルできません。

CSSクラスをforms.pyに追加しようとしましたが、バニラのデフォルトの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クラス内widgetを定義しようとした：

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

が、それは私の最初の試みと同様の効果がありました。

これを達成する別の方法がありますか、またはコード内で見つけることができるいくつかの論理エラーがありますか？

Answer 1

ここでは、Bootstrap hereを使って見つけた解決策を紹介します。

.fileUpload { 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t margin: 10px; 
 
} 
 
.fileUpload input.upload { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-size: 20px; 
 
\t cursor: pointer; 
 
\t opacity: 0; 
 
\t 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>

Answer 2

ファイルアップロードボタンをスタイルする場合は、別のボタンまたはリンクを定義し、そのスタイルを設定します。次に、ファイルアップロードボタンをトリガーするクリックイベントを設定します。

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

あなたはwidgetでそれを行うことができますDjangoのフォームでこの仕事をするために。