Wie können Sie Djangos Dateiauswahl-Formular-Schaltfläche formatieren?

Ich versuche, meinen Django Dateiuploadknopf zu stylen, aber da es durch das Formular gehandhabt wird und nicht ausdrücklich im HTML innerhalb der Schablone geschrieben wird, kann ich es nicht direkt mit HTML und CSS wie ich für andere Knöpfe vom Typ eingeben .Wie können Sie Djangos Dateiauswahl-Formular-Schaltfläche formatieren?

Ich habe versucht, meine CSS-Klasse innerhalb meiner forms.py hinzuzufügen, aber es ist die Vanille Standard-Django-Datei-Upload-Schaltfläche über meine Schaltfläche CSS-Stil gesetzt.

Mein Code ist wie folgt:

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'})

Ich versuchte auch, wie so ein widget in meiner Meta Klasse definieren:

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

aber das hatte die gleiche Wirkung wie mein erster Versuch.

Gibt es eine andere Möglichkeit, dies zu erreichen, oder gibt es einige logische Fehler, die Sie in meinem Code finden können?

Quelle

2015-01-13 aus_lacy

nur spezifisch zu sein ... ist das Problem, dass Sie in der gerenderten HTML (Django Problem) hinzugefügt nicht diese Klasse sehen? Oder können Sie das CSS-Set standardmäßig nicht überschreiben (CSS-Problem)? – dylrei

Ich kann meine benutzerdefinierten CSS sehen, aber das Problem ist, dass der Standard-'File Upload' Button, der die Dateiauswahl auslöst, dann über meine CSS-Stile gesetzt wird. Es scheint also, dass es sowohl auf der CSS- als auch auf der Django-Seite ein Problem sein könnte. –

Also ... sehen Sie sich die HTML-Quelle eines gerenderten Formulars an und Ihre Schaltfläche hat eine Klasse von my_class? Dann ist es ein CSS-Problem. Zu den möglichen Lösungen gehören das spätere Laden des CSS und/oder das Hinzufügen der Option! Wichtig oder ein kurzer JS-Aufruf am unteren Rand der Vorlage, um einen anderen Stil auf der Schaltfläche zu erzwingen. – dylrei

Für die Nachwelt hier ist die Lösung, die ich mit Bootstrap here gefunden habe.

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

Quelle

2015-01-13 20:29:13

Wenn Sie den Datei-Upload-Button formatieren möchten, definieren Sie einen anderen Button oder Link und stylen Sie diesen. Setzen Sie dann das Click-Ereignis, um die Schaltfläche zum Hochladen der Datei auszulösen.

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

Um diese Arbeit in einem Django zu machen bilden Sie es von einem widget tun können.

Quelle

2015-01-13 19:09:11 nima

Ich habe versucht, mit einem "Widget" wie in der ursprünglichen Frage gezeigt , aber es ergab das gleiche Ergebnis wie bei der Definition des Attributs in meiner '__init __()' Funktion. –

Ich meinte ein benutzerdefiniertes Widget mit dem obigen HTML und JS. – nima

Wie können Sie Djangos Dateiauswahl-Formular-Schaltfläche formatieren?

Antwort

Verwandte Themen