如何在jQuery-File-Upload中调用Razor Pages的DeleteFile方法

问题核心 #

当前无法触发后端删除方法的主要原因是DeleteUrl格式不符合Razor Pages的Handler规则，同时前端可能未正确发起AJAX删除请求。

解决方案 #

1. 修正DeleteUrl的构造（后端） #

Razor Pages的Handler通过?handler=XXX查询参数指定，而非路径片段。修改上传方法中DeleteUrl的生成逻辑：

// 替换原DeleteUrl行
var fileName = newProfileImageFileName + profileImageExtenstion;
DeleteUrl = $"https://localhost:7062/Donations/DonationPageSettings?handler=DeleteFile&file={Uri.EscapeDataString(fileName)}",

• 用Uri.EscapeDataString处理文件名，避免特殊字符（空格、中文等）导致URL解析失败
• 正确映射Handler：handler=DeleteFile对应后端OnGetDeleteFile方法（Razor Pages自动将OnGetXXX映射为handler=XXX）

2. 完善后端删除方法 #

修改OnGetDeleteFile，添加参数接收逻辑并返回BlueImp期望的JSON响应：

public async Task<IActionResult> OnGetDeleteFile([FromQuery] string file)
{
    if (!string.IsNullOrEmpty(file))
    {
        var webRootPath = _hostingEnviroment.WebRootPath;
        var filePath = Path.Combine(webRootPath, @"images\profileImages", file);
        
        if (System.IO.File.Exists(filePath))
        {
            System.IO.File.Delete(filePath);
        }
    }
    // 返回JSON告知前端删除成功
    return new JsonResult(new { success = true });
}

3. 确保前端正确触发删除请求 #

若BlueImp自动绑定的删除事件失效，可手动绑定点击事件（添加到页面script中）：

$(function () {
    // 初始化文件上传组件
    $('#fileupload').fileupload({
        url: '/Donations/DonationPageSettings?handler=UploadProfileImage',
        dataType: 'json'
    });

    // 手动绑定删除按钮点击事件
    $(document).on('click', '.delete', function (e) {
        e.preventDefault();
        var $btn = $(this);
        var $row = $btn.closest('.template-download');

        // 发送删除请求
        $.ajax({
            url: $btn.data('url'),
            type: $btn.data('type'),
            success: function () {
                // 删除成功后移除页面上的文件行
                $row.remove();
            },
            error: function () {
                alert('删除失败，请重试');
            }
        });
    });
});

4. 规避表单嵌套问题 #

HTML不允许表单嵌套，因此不要将删除按钮放在上传表单内。通过AJAX发送删除请求即可避开此限制，无需依赖表单提交。

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