Django实现无需点击提交按钮即可上传文件至指定文件夹

要实现用户选择文件后自动上传到指定文件夹，核心是通过JavaScript监听文件选择事件，发送AJAX请求到后端视图处理，以下是具体修改步骤：

1. 修改前端模板（upload.html） #

给文件输入框添加change事件监听，用户选择文件后自动发起上传请求，同时携带CSRF令牌避免跨站请求伪造错误：

<form method="post" enctype="multipart/form-data" id="uploadForm">
    {% csrf_token %}
    <input type="file" id="file" name="doc">
    <!-- 可移除原提交按钮，无需手动点击 -->
</form>

<script>
const fileInput = document.getElementById('file');
const form = document.getElementById('uploadForm');

fileInput.addEventListener('change', function() {
    const formData = new FormData(form);
    
    fetch('{% url "compliance check" %}', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`文件 ${data.filename} 上传成功！`);
            fileInput.value = ''; // 清空输入框，方便再次上传
        } else {
            alert('上传失败：' + data.error);
        }
    })
    .catch(error => {
        console.error('上传出错：', error);
        alert('上传过程中发生错误');
    });
});
</script>

2. 调整后端视图（views.py） #

原视图返回页面跳转，现在改为返回JSON响应适配AJAX请求，保留文件保存逻辑：

from django.http import JsonResponse
from django.core.files.storage import FileSystemStorage

def compliance_check(request):
    if request.method == 'POST':
        try:
            uploaded_file = request.FILES['doc']
            print(uploaded_file.name)
            print(uploaded_file.size)
            fs = FileSystemStorage()
            fs.save(uploaded_file.name, uploaded_file)
            
            return JsonResponse({
                'success': True,
                'filename': uploaded_file.name,
                'message': f'your file {uploaded_file.name} has been uploaded successfully'
            })
        except Exception as e:
            return JsonResponse({
                'success': False,
                'error': str(e)
            })
    # GET请求时返回上传页面
    return render(request, 'enroll/upload.html')

3. 确认配置与URL #

• 确保settings.py中MEDIA_ROOT路径正确（路径含空格时可保持原样，系统能识别）：

import os
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join('/home/t/Desktop/folder name')
MEDIA_URL = '/upload/'

• 确认urls.py中的路径配置无误：

path('compliance_check/', views.compliance_check, name='compliance check'),

注意事项 #

• 确保前端{% url "compliance check" %}的名称与urls.py中name属性完全匹配（包括空格），建议将name改为compliance_check（无空格）更规范，需同步修改前端模板中的对应内容。
• 若上传大文件，需在settings.py中调整上传大小限制：

  DATA_UPLOAD_MAX_MEMORY_SIZE = 10485760  # 10MB
  FILE_UPLOAD_MAX_MEMORY_SIZE = 10485760
  

• 可将alert提示替换为页面内的自定义提示元素，提升用户体验。

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