Django中Jquery/Ajax上传文件时POST无文件的问题

Hey there! Let's troubleshoot why your CSV upload isn't reaching your Django view—those empty <QueryDict: {}> and <MultiValueDict: {}> outputs usually point to a handful of common setup issues. Let's walk through the fixes step by step:

First and foremost, your form must include the enctype="multipart/form-data" attribute. Without this, browsers won't properly encode and send file data to the server. Here's how your form tag should look:

<form method="POST" enctype="multipart/form-data" id="csv-upload-form">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Upload CSV</button>
</form>

This is non-negotiable for file uploads—skip it, and your files will never show up in request.FILES.

Make sure your form uses a proper FileField and inherits from Django's base form class. Example:

from django import forms

class CSVUploadForm(forms.Form):
    csv_file = forms.FileField(
        label="Select your CSV file",
        help_text="Only CSV files are allowed"
    )

No fancy tricks here—just a straightforward file field to capture the upload.

If you're using JS to submit the form instead of the default browser submit, you must use FormData to package the form data. Regular form serialization won't include file content. Here's a working example:

const uploadForm = document.getElementById('csv-upload-form');

uploadForm.addEventListener('submit', (e) => {
    e.preventDefault();
    
    // Create FormData object from the form
    const formData = new FormData(uploadForm);
    
    // Send the request
    fetch('/your-upload-endpoint/', {
        method: 'POST',
        body: formData,
        headers: {
            // Don't forget Django's CSRF token!
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
    })
    .then(response => response.json())
    .then(data => console.log('Upload success:', data))
    .catch(err => console.error('Upload error:', err));
});

⚠️ Important: Don't manually set the Content-Type header here. FormData automatically handles the correct multipart boundary, and overriding this will break file uploads.

In your view, you need to pass both request.POST and request.FILES to the form when instantiating it. Here's how:

from django.shortcuts import render
from .forms import CSVUploadForm

def csv_upload_view(request):
    if request.method == 'POST':
        # Pass both POST data and FILES to the form
        form = CSVUploadForm(request.POST, request.FILES)
        if form.is_valid():
            # Access the cleaned file data
            uploaded_csv = form.cleaned_data['csv_file']
            
            # Now you can process the CSV (example using Python's csv module)
            import csv
            from io import TextIOWrapper
            
            # Convert the uploaded file to a text stream
            csv_reader = csv.reader(TextIOWrapper(uploaded_csv, encoding='utf-8'))
            for row in csv_reader:
                print(row)  # Replace with your processing logic
            
            return render(request, 'upload_success.html')
    else:
        form = CSVUploadForm()
    
    return render(request, 'upload_page.html', {'form': form})

If you only pass request.POST to the form, it'll ignore the uploaded file entirely—hence the empty request.FILES output.

• Browser Dev Tools: Open the Network tab, submit the form, and check the POST request's "Form Data" section. If you don't see your file listed there, the problem is in your frontend (form enctype or JS logic). If you do see it, the issue is in your Django setup.
• CSRF Token: Ensure the {% csrf_token %} template tag is present in your form. Django blocks unauthenticated POST requests by default, and while you might not see an error, it could silently fail or strip form data.
• Middleware: Double-check that no custom middleware is modifying the request.POST or request.FILES objects before they reach your view.

Once you fix these points, your request.FILES should populate with the uploaded CSV file, and you can start processing it as needed!

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