Verwenden von type = "image" zum Anpassen der Bezeichnung der Datei-Upload-Funktionalität in Django

Question

Ich habe versucht, die Bezeichnung der Schaltfläche zum Hochladen von Dateien in meiner Django App anpassen. In Firefox erscheint die Schaltfläche mit dem Label "Durchsuchen" und der Hinweistext "Keine Dateien ausgewählt". Ich brauche das Label, um 'Upload' zu sein, und möchte auch den Hinweistext anpassen. Hier ist, was nicht (von forms.py) funktioniert:

class PicsUploadForm(forms.ModelForm): 
    image = forms.ImageField(label='Upload') 
    image.widget.attrs["value"] ='Upload' 
    class Meta: 
     model = Pic 
     exclude = ("sender","sending_time", "expiry_interval") 
     fields = ("image",) 

    def __init__(self, *args, **kwargs): 
     super(PicsUploadForm, self).__init__(*args, **kwargs) 
     self.fields['image'].widget.attrs.update({'value':'Upload'}) 

Es produziert den folgenden Tag in html:

<input id="id_image" type="file" value="Upload" name="image"></input> 

Aber der Upload-Button erscheint nach wie vor mit 'Durchsuchen' Etikett, statt ‚Upload ". Ich habe auch versucht die folgende (was nicht funktioniert):

def __init__(self, *args, **kwargs): 
    super(PicsUploadForm, self).__init__(*args, **kwargs) 
    self.fields['image'].label='Upload'#["value"]='Upload' 

Allerdings bin ich erfolgreich in der Lage die Beschriftung der Schaltfläche zu 'Upload' ändern, wenn ich die Art von 'file' zu 'image' ändern. Laut w3schools definiert dieser Typ ein Bild als Übermittlungsschaltfläche.

Ich fragte mich, ob ich irgendwie type="image" verwenden könnte, um das Label meiner Dateiupload-Schaltfläche anzupassen (oder die Funktionalität von Grund auf neu zu gestalten).

Hat jemand ein funktionierendes Beispiel dafür, oder wird das nie funktionieren?

Answer 1

Für den ersten Teil,

Wie django machen ein eigenes Widget machen <input type="image" ...>

Sie müssen erstellen und einfach außer Kraft setzen input_type Attribut. Etwas wie folgt aus:

class CustomImageWidget(forms.ClearableFileInput): 
    input_type = 'image' 

class PicsUploadForm(forms.ModelForm): 
    image = forms.ImageField(widget=CustomImageWidget()) 
    image.widget.attrs["value"] ='Upload' 

Dies ist die Form <input type="image" ...> machen machen wird, aber das Element wird wie ein Dateieingabefeld nicht.

Für den zweiten Teil,

Wie Etiketten Upload-Button anpassen?

Javascript:

document.getElementById("uploadBtn").onchange = function() { 
    document.getElementById("uploadFile").value = this.value; 
}; 

Html Teil:

<input id="uploadFile" placeholder="Choose File" disabled="disabled" /> 
<div class="fileUpload btn btn-primary"> 
    <span>Upload</span> 
    <input id="uploadBtn" type="file" class="upload" /> 
</div> 

Sie können die gerenderte HTML Form ändern mit crispy-forms oder durch jedes Formularfeld Iterieren und Schreiben selbst html .

von Genommen:

http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

How to change the button text of <input type="file" />?