修改Django默认文件上传输入：添加onchange属性实现进度条

嘿，我来帮你搞定这个需求！要给Django文件上传表单的输入标签加上onchange="uploadFile()"属性，实现上传进度条触发，有几个实用的方法，看你哪种场景更合适：

1. 自定义表单类（推荐，适合复用） #

如果你的上传功能是基于Django的Form或ModelForm实现的，直接在字段的widget里添加属性是最规范的做法，还能方便复用。示例代码如下：

from django import forms
from .models import YourUploadModel  # 替换成你的实际模型

class FileUploadForm(forms.ModelForm):
    class Meta:
        model = YourUploadModel
        fields = ['uploaded_file']  # 替换成你的模型里的文件字段名
        widgets = {
            'uploaded_file': forms.FileInput(attrs={
                'onchange': 'uploadFile()',
                # 还可以顺便加其他样式或属性，比如
                'class': 'custom-file-input'
            })
        }

之后在模板里正常渲染表单字段{{ form.uploaded_file }}，生成的input标签就会自动带上onchange属性啦。

2. 模板中手动处理（适合临时场景） #

要是不想改动后端的表单代码，直接在模板里操作也可以，两种方式可选：

方法A：完全手写原生input标签 #

直接写出完整的input元素，指定name和id要和表单字段对应：

<input type="file" name="uploaded_file" id="id_uploaded_file" onchange="uploadFile()">

方法B：用JS动态添加属性 #

先渲染Django生成的字段，再用JavaScript给它加上属性：

{{ form.uploaded_file }}

<script>
// 获取Django生成的文件输入元素，添加onchange事件
document.getElementById('{{ form.uploaded_file.id_for_label }}').setAttribute('onchange', 'uploadFile()');
</script>

3. 自定义Widget（全局复用场景） #

如果你的项目里很多地方都需要带这个属性的文件上传输入，可以自定义一个专属的Widget，一劳永逸：

from django.forms import FileInput

class ProgressTrackingFileInput(FileInput):
    def __init__(self, attrs=None):
        # 预设默认属性
        default_attrs = {'onchange': 'uploadFile()'}
        # 如果传入了额外属性，合并进去
        if attrs:
            default_attrs.update(attrs)
        super().__init__(default_attrs)

# 在表单里使用这个自定义Widget
class FileUploadForm(forms.ModelForm):
    class Meta:
        model = YourUploadModel
        fields = ['uploaded_file']
        widgets = {
            'uploaded_file': ProgressTrackingFileInput()
        }

最后提醒一句：别忘了在模板里定义好uploadFile()函数哦，这个函数需要实现前端的上传进度监听逻辑（比如用XMLHttpRequest的progress事件），Django这边的工作就是帮你把触发事件的属性加上~

内容的提问来源于stack exchange，提问作者Jason Howard