Django结合AJAX使用modelformset_factory无法上传多张图片如何解决？

后端部分 #

• 缺失FormSet定义：代码里直接使用了UploadDocumentFormSet，但没有初始化定义，需要在forms.py或views.py顶部补充：

from django.forms import modelformset_factory
UploadDocumentFormSet = modelformset_factory(Document, form=UploadDocumentsForm, extra=1, can_delete=False)

• request.is_ajax()已废弃：Django 3.1及以上版本已经移除了该方法，替换为以下判断逻辑：

if request.method == 'POST' and request.headers.get('x-requested-with') == 'XMLHttpRequest':

• 校验失败无有效返回：表单校验失败时仅添加了messages，AJAX请求无法接收页面重定向的messages内容，需要返回结构化错误响应：

else:
    return JsonResponse({'error': images.errors}, status=400)

• 冗余校验逻辑：formset.is_valid()执行时已经完成了所有子表单的校验，循环里的img.is_valid()判断可以直接删除
• CSRF参数名不匹配：Django默认接收的CSRF参数名为csrfmiddlewaretoken，AJAX里传的csrf键名错误，会触发403禁止访问错误

前端HTML部分 #

• 管理表单位置错误：{{images.management_form}}是formset的全局管理表单，只能渲染一次，放在for循环里会重复生成导致计数异常，需要移到form标签内部、for循环外面
• 重复ID问题：id="images"的div放在for循环里会生成多个相同ID的DOM元素，新增表单的append操作会异常，调整结构把该div提到for循环外部

前端AJAX部分 #

• FormData初始化时机错误：当前页面加载时就生成了FormData，此时用户还未选择文件，上传的都是空值，需要把FormData的生成逻辑移到submitHanler函数内部
• 硬编码文件字段：手动写死了docs0到docs3的字段，用户新增更多表单后后续文件无法上传，改为直接读取整个表单内容即可，优化后的逻辑如下：

function submitHanler(e){
    e.preventDefault();
    const formData = new FormData(this); // 直接读取整个表单的内容，不用手动拼接字段
    $.ajax({
        type:'POST',
        url:"{% url 'booking:add_new_image' id=2222 %}".replace('2222', {{obj.id}}),
        data:formData,
        dataType:'json',
        processData: false, // 必须添加，禁止jQuery处理FormData
        contentType: false, // 必须添加，禁止jQuery自动设置请求头类型
        success:successFunction,
        error: function(xhr){
            alertify.error('上传失败：' + xhr.responseJSON.error)
        }
    })        
}

• 增加前端前置校验：上传前判断文件格式（仅允许jpg/png/webp等图片格式）、文件大小，避免无效请求提交到后端
• 添加上传状态提示：上传过程中显示loading状态，禁止重复提交
• 增加图片预览功能：用户选择文件后、提交前即可预览选中的图片，上传成功后直接渲染已上传的图片列表，无需刷新页面
• 可选单图异步上传：不用等用户选完所有图一起提交，每选一张就自动上传，操作更流畅

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