ASP.NET文档管理系统：ListBox双击打开及拖拽上传改造需求

一、ListBox双击触发文件打开/下载 #

前端（default.aspx）调整 #

给ListBox控件绑定客户端双击事件，并添加处理脚本：

<asp:ListBox ID="ListBoxFiles" runat="server" Width="100%" Height="200px" ondblclick="handleFileDoubleClick(this)"></asp:ListBox>

<script type="text/javascript">
function handleFileDoubleClick(listBox) {
    if (listBox.selectedIndex === -1) return;
    const fileName = listBox.options[listBox.selectedIndex].text;
    __doPostBack('<%= ListBoxFiles.UniqueID %>', 'Download_' + fileName);
}
</script>

后端（default.aspx.cs）逻辑补充 #

在Page_Load中捕获双击触发的回发事件，复用原有打开/下载逻辑：

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        var eventTarget = Request.Form["__EVENTTARGET"];
        var eventArgument = Request.Form["__EVENTARGUMENT"];
        
        if (eventTarget == ListBoxFiles.UniqueID && eventArgument.StartsWith("Download_"))
        {
            var fileName = eventArgument.Substring(9);
            DownloadOrOpenFile(fileName);
        }
    }
    // 保留原有页面初始化逻辑
}

// 复用/实现文件打开/下载核心方法
private void DownloadOrOpenFile(string fileName)
{
    var targetPath = GetTargetFolderPath();
    var fullFilePath = Path.Combine(targetPath, fileName);
    
    if (!File.Exists(fullFilePath)) return;

    var contentType = MimeMapping.GetMimeMapping(fullFilePath);
    Response.ContentType = contentType;

    // 根据MIME类型决定是在线打开还是下载
    if (contentType.StartsWith("text/") || contentType.Contains("pdf") || contentType.StartsWith("image/"))
    {
        Response.AddHeader("Content-Disposition", $"inline; filename=\"{fileName}\"");
    }
    else
    {
        Response.AddHeader("Content-Disposition", $"attachment; filename=\"{fileName}\"");
    }

    Response.TransmitFile(fullFilePath);
    Response.End();
}

二、替换为拖拽上传功能 #

前端（default.aspx）重构上传区域 #

替换原有的FileUpload控件，添加拖拽交互区域：

<div id="dropZone" style="border:2px dashed #ccc; padding:50px; text-align:center; margin:10px 0; cursor:pointer;">
    拖拽文件到此处上传，或点击选择文件
    <input type="file" id="fileInput" multiple style="display:none;" />
</div>
<asp:Label ID="lblUploadStatus" runat="server" ForeColor="Green"></asp:Label>

<script type="text/javascript">
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');

// 点击区域触发文件选择
dropZone.addEventListener('click', () => fileInput.click());

// 阻止默认拖拽行为
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
    dropZone.addEventListener(evt, e => {e.preventDefault();e.stopPropagation();}, false);
    document.body.addEventListener(evt, e => {e.preventDefault();e.stopPropagation();}, false);
});

// 拖拽状态样式切换
['dragenter', 'dragover'].forEach(evt => dropZone.addEventListener(evt, highlight, false));
['dragleave', 'drop'].forEach(evt => dropZone.addEventListener(evt, unhighlight, false));

function highlight() {
    dropZone.style.borderColor = '#2196F3';
    dropZone.style.backgroundColor = '#f5f5f5';
}

function unhighlight() {
    dropZone.style.borderColor = '#ccc';
    dropZone.style.backgroundColor = '#fff';
}

// 处理文件上传
dropZone.addEventListener('drop', e => handleFiles({target: {files: e.dataTransfer.files}}));
fileInput.addEventListener('change', handleFiles);

function handleFiles(e) {
    const files = e.target.files;
    if (files.length === 0) return;

    const formData = new FormData();
    Array.from(files).forEach(file => formData.append('uploadFiles', file));

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'default.aspx?action=upload', true);
    xhr.onload = () => {
        const statusLabel = document.getElementById('<%= lblUploadStatus.ClientID %>');
        if (xhr.status === 200) {
            statusLabel.textContent = xhr.responseText;
            // 上传完成后刷新文件列表（假设原有刷新按钮ID为btnRefresh）
            __doPostBack('<%= btnRefresh.UniqueID %>', '');
        } else {
            statusLabel.textContent = '上传失败';
        }
    };
    xhr.send(formData);
}
</script>

后端（default.aspx.cs）添加拖拽上传处理 #

在Page_Load中优先处理上传请求：

protected void Page_Load(object sender, EventArgs e)
{
    // 处理拖拽上传请求
    if (Request.QueryString["action"] == "upload" && Request.Files.Count > 0)
    {
        ProcessDragUploads();
        Response.End();
        return;
    }

    // 保留原有回发处理、页面初始化逻辑
}

private void ProcessDragUploads()
{
    var targetPath = GetTargetFolderPath();
    if (!Directory.Exists(targetPath))
    {
        Directory.CreateDirectory(targetPath);
    }

    int successCount = 0;
    for (int i = 0; i < Request.Files.Count; i++)
    {
        var file = Request.Files[i];
        if (file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var savePath = Path.Combine(targetPath, fileName);
            file.SaveAs(savePath);
            successCount++;
        }
    }

    Response.Write($"成功上传 {successCount} 个文件");
}

// 保留原有获取目标文件夹路径的方法
private string GetTargetFolderPath()
{
    var param1 = Request.QueryString["param1"] ?? string.Empty;
    var param2 = Request.QueryString["param2"] ?? string.Empty;
    var basePath = ConfigurationManager.AppSettings["ShareLocation"] ?? Server.MapPath("~/share");
    return Path.Combine(basePath, param1, param2);
}

关键注意事项 #

1. 确保Web.config中ShareLocation配置正确，且应用程序池对目标文件夹拥有读写权限
2. 拖拽上传依赖HTML5 File API，需确认目标浏览器版本兼容
3. 可根据需求添加文件大小限制、类型校验等逻辑

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