不使用Ajax，通过@HTML.BeginForm结合FormData追加拖拽文件问题

嘿，我懂你遇到的问题了——你想把拖拽获取的文件通过ASP.NET MVC的@Html.BeginForm默认提交方式发出去，但现在文件没出现在multipart请求里，对吧？

问题根源 #

表单默认只会提交它包含的DOM表单控件（比如input、select这类）的数据。你通过拖拽得到的file对象只是存在JS变量里，没有和表单内的文件输入框关联，所以提交时浏览器不会把这个内存里的文件对象打包到请求里。

解决方案核心思路 #

创建一个隐藏的<input type="file">元素，把拖拽得到的文件赋值给这个元素的files属性，让它成为表单的一部分。这样表单提交时，浏览器就会自动把这个文件包含在multipart请求里。

完整代码示例 #

1. 表单部分（Razor视图）

确保表单设置了enctype="multipart/form-data"（这是提交文件的必要条件），同时添加隐藏的文件输入框：

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "myForm" }))
{
    <!-- 你的其他表单字段 -->
    <div class="form-group">
        <label>用户名</label>
        <input type="text" name="username" class="form-control" />
    </div>

    <!-- 隐藏的文件输入框，name要和后端接收参数一致 -->
    <input type="file" id="hiddenFileInput" name="uploadedFile" style="display: none;" multiple />

    <!-- 拖拽区域 -->
    <div id="dropArea" style="width: 300px; height: 200px; border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 20px 0;">
        拖拽文件到这里
    </div>

    <button type="submit" class="btn btn-primary">提交表单</button>
}

2. 拖拽处理JS代码

修改你的拖拽逻辑，把获取到的文件赋值给隐藏的文件输入框：

const dropArea = document.getElementById('dropArea');
const hiddenFileInput = document.getElementById('hiddenFileInput');

// 阻止浏览器默认拖拽行为，避免文件被打开
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

// 拖拽进入/离开时的视觉反馈（可选）
['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => {
        dropArea.style.borderColor = '#2196F3';
        dropArea.style.backgroundColor = '#f5f5f5';
    }, false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => {
        dropArea.style.borderColor = '#ccc';
        dropArea.style.backgroundColor = '#fff';
    }, false);
});

// 处理文件放下事件
dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        // 把拖拽得到的文件赋值给隐藏输入框的files属性
        hiddenFileInput.files = files;
        console.log(`已添加 ${files.length} 个文件到表单`);
    }
}

3. 后端接收代码（C#）

确保Action参数名和前端隐藏输入框的name属性一致：

[HttpPost]
public ActionResult Upload(string username, HttpPostedFileBase uploadedFile)
{
    // 如果支持多文件上传，改用 IEnumerable<HttpPostedFileBase> uploadedFiles
    if (uploadedFile != null && uploadedFile.ContentLength > 0)
    {
        // 示例：保存文件到服务器
        var fileName = Path.GetFileName(uploadedFile.FileName);
        var savePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
        uploadedFile.SaveAs(savePath);
        
        return RedirectToAction("UploadSuccess");
    }
    
    ViewBag.Error = "请选择要上传的文件";
    return View();
}

注意事项 #

• 不要手动修改文件输入框的value属性——浏览器出于安全限制，不允许直接设置这个值，只能通过files属性赋值（从拖拽或原生文件选择框获取的FileList）
• 如果需要支持多文件上传，给隐藏输入框加上multiple属性，后端用IEnumerable<HttpPostedFileBase>接收参数
• 务必保证表单的enctype="multipart/form-data"，否则文件无法被正确提交

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