如何让HTML拖拽上传仅接受视频文件

前端层面：监听拖拽事件验证文件类型 #

浏览器的accept属性仅限制文件选择弹窗，无法约束拖拽行为，因此需要通过JavaScript监听拖拽相关事件来拦截非视频文件：

先给你的文件输入框添加一个ID（比如video-upload），再添加以下脚本：

<script>
const uploadInput = document.getElementById('video-upload');
const uploadContainer = uploadInput.closest('.files');

// 阻止默认拖拽行为，避免浏览器直接打开文件
['dragenter', 'dragover'].forEach(eventName => {
  uploadContainer.addEventListener(eventName, (e) => {
    e.preventDefault();
    uploadContainer.classList.add('color'); // 保留你的样式反馈
  });
});

uploadContainer.addEventListener('dragleave', () => {
  uploadContainer.classList.remove('color');
});

uploadContainer.addEventListener('drop', (e) => {
  e.preventDefault();
  uploadContainer.classList.remove('color');

  // 筛选符合要求的视频文件
  const validFiles = Array.from(e.dataTransfer.files).filter(file => {
    return file.type.startsWith('video/');
  });

  if (validFiles.length === e.dataTransfer.files.length) {
    // 所有文件均合法，赋值给输入框
    uploadInput.files = e.dataTransfer.files;
  } else {
    // 存在非法文件，提示用户
    alert('只能上传视频文件，请重新选择');
  }
});
</script>

同时修改HTML中的输入框，补充ID属性：

<input type="file" class="form-control" multiple="" accept="video/mp4,video/x-m4v,video/*" id="video-upload">

后端层面：Django必须做二次验证 #

前端限制仅为用户体验优化，任何人都可以绕过前端限制上传任意文件，因此Django后端必须严格验证文件合法性：

在处理上传的视图函数中，可通过两种方式验证：

from django.http import HttpResponseBadRequest

def handle_video_upload(request):
    if request.method == 'POST' and request.FILES:
        # 注意替换成你的输入框name属性值
        for file in request.FILES.getlist('video-upload'):
            # 1. 检查文件MIME类型
            if not file.content_type.startswith('video/'):
                return HttpResponseBadRequest('只能上传视频文件')
            
            # 2. 更严格的验证：检测文件真实内容（推荐）
            # 需要先安装python-magic库：pip install python-magic
            import magic
            file_type = magic.from_buffer(file.read(1024), mime=True)
            file.seek(0) # 重置文件指针，避免后续读取出错
            if not file_type.startswith('video/'):
                return HttpResponseBadRequest('文件类型不合法，请上传视频')
            
            # 后续执行文件保存等逻辑
    # ...其他视图代码

关于Django的影响 #

Django本身不会干预前端的拖拽行为限制，但作为后端，它是保障文件上传安全的核心防线。前端限制仅用于友好提示用户，后端验证才是防止恶意上传的关键。

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