Django Ajax 文件上传到服务器

在Django中使用Ajax进行文件上传通常涉及到两个主要步骤：前端的HTML表单交互和后端的处理逻辑。首先，你需要创建一个前端HTML表单，并添加一个隐藏的`<input type="file">`元素来让用户选择文件。然后利用JavaScript库如jQuery或axios，设置Ajax请求。

以下是一个简单的前端示例：

<!-- HTML -->
<form id="upload-form" enctype="multipart/form-data">
    <input type="file" name="file" style="display:none;">
    <button type="submit">上传</button>
    <div id="upload-status"></div>
</form>

<script>
$(document).ready(function() {
    $('#upload-form').on('submit', function(event) {
        event.preventDefault(); // 阻止默认提交
        let formData = new FormData(this);
        $.ajax({
            url: '/api/upload',
            method: 'POST',
            data: formData,
            processData: false, // 必须设置，因为FormData不处理数据
            contentType: false,
            success: function(response) {
                $('#upload-status').text(response.message);
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    });
});
</script>

后端方面，在Django中，你需要创建一个视图函数来接收并处理上传的文件。例如：

# views.py
from django.http import JsonResponse
from .models import UploadedFile

def upload_file(request):
    if request.method == 'POST':
        form_data = request.FILES['file']
        # 检查文件大小、类型等验证条件
        file = process_and_save_file(form_data)
        response_data = {'message': '文件已上传'}
        return JsonResponse(response_data, status=200)
    else:
        return HttpResponse(status=405)

def process_and_save_file(file):
    # 实现文件处理逻辑，比如保存到数据库或文件系统
    uploaded_file = UploadedFile(file=file)
    # 省略保存操作...
    return uploaded_file

记得要在urls.py中配置相应的URL模式，以便将Ajax请求路由到这个视图。