基于Django框架实现保存按钮触发文件上传及流程需求问询

1. 前端表单改造 #

修改原有表单，添加“保存”按钮（使用button类型避免默认表单提交）、初始禁用的“运行”按钮，以及隐藏字段存储上传后的文件ID：

<form id="upload-form" enctype="multipart/form-data">
    {% csrf_token%}
    <input type="file" name="file_upload" id="choose_upload_file" value="" accept=".zip,.rar,.7z,.gz,"/><br>            
    <button type="button" class="btn btn-secondary btn-block" id="save-btn">保存</button>
    <button type="button" class="btn btn-primary btn-block" id="run-btn" disabled>运行</button>
    <!-- 存储上传后的文件ID，供后续运行接口调用 -->
    <input type="hidden" id="uploaded-file-id" value="">
</form>

2. 后端视图调整 #

2.1 改造上传视图（处理“保存”按钮请求） #

调整projects_upload视图适配AJAX请求，上传成功后返回文件ID：

from django.http import JsonResponse
from .models import UploadFile

def projects_upload(request):
    if request.method == 'POST' and request.is_ajax():
        try:
            upload_request = UploadFile()
            upload_request.file = request.FILES['file_upload']
            upload_request.save()
            # 返回文件ID，用于后续运行接口定位文件
            return JsonResponse({'status': 'success', 'file_id': upload_request.id})
        except Exception as e:
            return JsonResponse({'status': 'error', 'message': str(e)})
    return JsonResponse({'status': 'error', 'message': '无效请求'})

2.2 新增运行处理视图 #

创建视图处理“运行”按钮请求，根据文件ID获取并处理文件：

def process_uploaded_file(request):
    if request.method == 'POST' and request.is_ajax():
        file_id = request.POST.get('file_id')
        try:
            upload_file = UploadFile.objects.get(id=file_id)
            # 此处编写你的文件处理逻辑，比如解压、解析内容等
            # 示例：handle_file_logic(upload_file.file.path)
            return JsonResponse({'status': 'success', 'message': '文件处理完成'})
        except UploadFile.DoesNotExist:
            return JsonResponse({'status': 'error', 'message': '目标文件不存在'})
        except Exception as e:
            return JsonResponse({'status': 'error', 'message': str(e)})
    return JsonResponse({'status': 'error', 'message': '无效请求'})

记得在urls.py中添加运行视图的路由：

from django.urls import path
from . import views

urlpatterns = [
    path('uploadProject/', views.projects_upload, name='upload_project'),
    path('processFile/', views.process_uploaded_file, name='process_file'),
]

3. 前端JavaScript逻辑 #

添加JS代码处理按钮点击、AJAX上传及运行请求：

// 获取DOM元素
const saveBtn = document.getElementById('save-btn');
const runBtn = document.getElementById('run-btn');
const fileInput = document.getElementById('choose_upload_file');
const uploadedFileIdInput = document.getElementById('uploaded-file-id');
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

// 保存按钮点击事件
saveBtn.addEventListener('click', function() {
    const file = fileInput.files[0];
    if (!file) {
        alert('请先选择文件');
        return;
    }

    // 构建FormData对象
    const formData = new FormData();
    formData.append('file_upload', file);
    formData.append('csrfmiddlewaretoken', csrfToken);

    // AJAX上传文件
    fetch('/uploadProject/', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            // 存储文件ID并启用运行按钮
            uploadedFileIdInput.value = data.file_id;
            runBtn.disabled = false;
            alert('文件上传保存成功');
        } else {
            alert('上传失败：' + data.message);
        }
    })
    .catch(error => {
        alert('上传出错：' + error.message);
    });
});

// 运行按钮点击事件
runBtn.addEventListener('click', function() {
    const fileId = uploadedFileIdInput.value;
    if (!fileId) {
        alert('请先保存上传文件');
        return;
    }

    // 构建请求数据
    const formData = new FormData();
    formData.append('file_id', fileId);
    formData.append('csrfmiddlewaretoken', csrfToken);

    // AJAX请求处理文件
    fetch('/processFile/', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            alert(data.message);
        } else {
            alert('处理失败：' + data.message);
        }
    })
    .catch(error => {
        alert('处理出错：' + error.message);
    });
});

关键说明 #

• 保存按钮：通过AJAX异步提交文件，避免页面刷新，上传成功后返回文件ID并激活运行按钮。
• 运行按钮：初始处于禁用状态，仅在文件上传成功后可点击，通过存储的文件ID请求后端处理逻辑。
• 用户选择捕获：前端通过fileInput.files[0]获取用户选中的文件，后端将文件信息保存到UploadFile模型，完成用户选择的记录。

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