type = "image"を使用してDjangoのファイルアップロード機能のラベルをカスタマイズする

Question

私はDjangoアプリケーションでファイルアップロードボタンのラベルをカスタマイズしようとしています。 Firefoxでは、「Browse」というラベルの付いたボタンが表示され、「No files selected」というヒントテキストが表示されます。私はラベルを 'Upload'にする必要があり、ヒントテキストもカスタマイズしたい。ここで（forms.pyから）動作しないものです：

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

それはHTMLで次のタグを生成します。

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

しかし、アップロードボタンはまだ代わりにアップロード」は、「参照」ラベルが表示されます'私はまた、（動作しない）、次を試してみました：

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

はしかし、私は正常私は'image'に'file'からタイプを変更した場合'Upload'に、ボタンのラベルを変更することができますよ。 w3schoolsによれば、このタイプのは、送信ボタンとしてイメージを定義します。

type="image"を使用して、ファイルアップロードボタンのラベルをカスタマイズしたり、機能をゼロから作ることができるかどうかは疑問でした。

誰かがこのための実際の例を持っていますか、これは決して動作しませんか？最初の部分については

Answer 1

、カスタムウィジェットを作成し、単にinput_type属性をオーバーライドする必要が<input type="image" ...>

をレンダリングするためのDjangoにする方法

。このような何か：

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

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

これは、フォームが<input type="image" ...>をレンダリングになりますが、要素は、ファイルの入力フィールドのように動作しません。アップロードボタンのラベルをカスタマイズする方法第二部については

、

？

Javascriptを：

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

HTML部分：

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

あなたはcrispy-formsを使用してフォームのレンダリングされたHTMLを変更したり、すべてのフォームフィールドを反復処理して書き込むことで、自分自身をhtmlのことができます。` 'image'`にfile'` 'あなたは`からタイプを変更した場合Upload'`' あなたは唯一 `にボタンのラベルを変更することができます

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

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