发布图像上传按钮的样式

Question

基本上我正在尝试设置我的图片上传表单字段。通过从这里的另一个问题的指导，我最终做到了这一点：

＆＃13;

＆＃13;

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

＆＃13;

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
  }
  .fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这应该可行，但如何将其绑定到我的django表单字段？如果我将输入中的class属性替换为＆＃34; upload＆＃34;到＆＃34; profile_pic＆＃34;，将出现主上传按钮，这很糟糕。或者我做错了吗？我只需要将信息传递给我的表格。

＆＃13;

＆＃13;

photo = forms.ImageField(required=True,
                             widget=forms.FileInput(attrs={'class': 'profile_pic'}))

＆＃13;

＆＃13;

＆＃13;