使用 Django 的角度文件上传应用程序 - Javascript

文件上传是 Web 应用程序常见的需求之一。在 Django 中，可以轻松地实现文件上传功能，而 Javascript 可以通过 AJAX 实现无刷新上传。

本文将介绍如何使用 Django 和 Javascript 实现文件上传应用程序。

Django 实现文件上传

Django 中可以通过使用 FileField 字段在模型中定义一个文件上传字段。下面是一个例子：

from django.db import models

class MyModel(models.Model):
    file = models.FileField(upload_to='uploads/')

upload_to 参数指定了文件存储的目录。

在视图中处理文件上传的过程也很简单。可以使用 request.FILES 获取上传的文件数据，然后调用 handle_uploaded_file() 函数将文件保存到指定目录中。

from django.http import HttpResponseRedirect
from django.shortcuts import render

def upload(request):
    if request.method == 'POST':
        file = request.FILES['file']
        handle_uploaded_file(file)
        return HttpResponseRedirect('/success/')
    else:
        return render(request, 'upload.html')

def handle_uploaded_file(f):
    with open('/path/to/save/file', 'wb+') as destination:
        for chunk in f.chunks():
            destination.write(chunk)

需要注意的是，文件上传的表单需要设置 enctype="multipart/form-data"。

Javascript 实现文件上传

在客户端实现文件上传可以使用 AJAX。以下是一个例子：

const input = document.querySelector('input[type="file"]');
const button = document.querySelector('button[type="submit"]');

button.addEventListener('click', () => {
  const formData = new FormData();
  formData.append('file', input.files[0]);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload/');
  xhr.send(formData);
});

使用 FormData 创建一个表单对象，然后将文件添加进去。调用 XMLHttpRequest 对象的 open() 方法指定请求方法和上传 URL，然后调用 send() 方法发送请求。

结论

使用 Django 和 Javascript 实现文件上传应用程序非常简单。在 Django 中，使用 FileField 和 request.FILES 获取上传的文件数据；在客户端，使用 AJAX 和 FormData 实现无刷新上传。