使用type =「形象」自定義文件上傳功能標籤在Django

我一直在試圖自定義文件上傳按鈕的標籤在我的Django應用程序。在Firefox中，該按鈕顯示爲「瀏覽」標籤，提示文本爲「未選擇文件」。我需要標籤爲'上傳'，並且也想自定義提示文字。這裏是不會（從forms.py）工作：使用type =「形象」自定義文件上傳功能標籤在Django

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'

不過，我能夠成功地將按鈕的標籤更改爲'Upload'如果我改變的類型從'file'到'image'。根據W3Schools的，這種類型的定義圖像作爲提交按鈕。

我在想，如果我能以某種方式使用type="image"定製我的文件上傳按鈕的標籤（或使從無到有的功能）。

有沒有人有一個工作示例這一點，還是將不會起作用？

來源

2016-03-28 Hassan Baig

只能更改按鈕標籤爲' 'Upload''如果你改變從'類型' file''到''image''使其僅使用Inspect Element/Developer工具進行文件輸入。您不能在沒有javascript的情況下更改上傳消息。 – v1k45

@ v1k45：將其寫爲答案。 –

在第一部分，

如何讓Django的渲染<input type="image" ...>

你需要創建一個自定義窗口小部件，簡單地覆蓋input_type屬性。事情是這樣的：

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自己迭代。

來自

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

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

來源

2016-03-28 13:05:13 v1k45

使用type =「形象」自定義文件上傳功能標籤在Django

回答

相關問題