ASP UpdatePanel中异步传递Input File内容，无回发实现方案咨询

嘿，我来帮你理清楚这个问题：首先明确说——直接通过操作缓存来获取文件完成帖子发布是不可行的，接下来我会给你拆解原因，再提供符合需求的异步上传方案。

为什么缓存思路走不通？ #

你用URL.createObjectURL(event.target.files[0])生成的是浏览器本地的临时Blob URL，这个地址只在当前浏览器会话里有效，服务器端完全访问不到对应的文件内容，而且浏览器的安全机制也不允许脚本通过缓存或本地路径直接导出文件二进制数据。要把文件传到服务器，必须通过合法的HTTP请求把File对象本身传递过去。

符合需求的异步上传实现方案 #

既然你想在UpdatePanel内用纯HTML input file实现无回发的带图帖子发布，推荐用原生JS的XMLHttpRequest/Fetch API + FormData来完成，完全避开UpdatePanel的回发机制，同时能实现异步上传和帖子发布。

1. 前端代码修改（整合预览+上传）

<div>
    <!-- 图片预览区 -->
    <img id="imgoutput" style="max-width:200px;max-height:200px;margin:10px 0;" />
    <!-- 文件选择控件 -->
    <input id="upload1" type="file" name="upload1" accept="image/*" onchange="loadFile(event)" />
    <!-- 帖子内容输入 -->
    <textarea id="postContent" placeholder="写点什么..." style="width:300px;height:100px;margin:10px 0;"></textarea>
    <!-- 发布按钮 -->
    <button onclick="publishPost()">发布帖子</button>
    <!-- 结果提示 -->
    <div id="publishTip" style="margin-top:10px;color:#666;"></div>
</div>

<script>
let selectedFile = null;

// 图片预览逻辑（保留你原来的代码）
const loadFile = function(event) {
    const output = document.getElementById('imgoutput');
    selectedFile = event.target.files[0];
    output.src = URL.createObjectURL(selectedFile);
};

// 异步发布帖子逻辑
function publishPost() {
    if (!selectedFile) {
        document.getElementById('publishTip').innerHTML = '*请先选择要上传的图片';
        return;
    }
    const postText = document.getElementById('postContent').value.trim();
    if (!postText) {
        document.getElementById('publishTip').innerHTML = '*请填写帖子内容';
        return;
    }

    // 构造FormData，包含文件和帖子内容
    const formData = new FormData();
    formData.append('postImage', selectedFile);
    formData.append('postText', postText);

    // 发送异步请求
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'PostPublishHandler.ashx', true);
    
    xhr.onload = function() {
        if (xhr.status === 200) {
            const result = JSON.parse(xhr.responseText);
            if (result.success) {
                document.getElementById('publishTip').innerHTML = '✅ 帖子发布成功！';
                // 上传成功后可以重置控件，或者更新UpdatePanel内的帖子列表
                // 如果需要刷新UpdatePanel，可调用：__doPostBack('你的UpdatePanelID', '');
                resetUploadControls();
            } else {
                document.getElementById('publishTip').innerHTML = `❌ 发布失败：${result.msg}`;
            }
        } else {
            document.getElementById('publishTip').innerHTML = `❌ 请求出错，状态码：${xhr.status}`;
        }
    };

    xhr.onerror = function() {
        document.getElementById('publishTip').innerHTML = '❌ 网络异常，请稍后重试';
    };

    xhr.send(formData);
}

// 重置上传控件的辅助函数
function resetUploadControls() {
    document.getElementById('upload1').value = '';
    document.getElementById('imgoutput').src = '';
    document.getElementById('postContent').value = '';
    selectedFile = null;
}
</script>

2. 后台处理（用Generic Handler接收数据）

创建一个PostPublishHandler.ashx文件，负责接收文件和帖子内容，完成保存逻辑：

using System;
using System.IO;
using System.Web;

public class PostPublishHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        try
        {
            // 获取上传的图片
            HttpPostedFile imageFile = context.Request.Files["postImage"];
            // 获取帖子内容
            string postText = context.Request.Form["postText"];

            // 验证文件和内容
            if (imageFile == null || imageFile.ContentLength == 0)
            {
                context.Response.Write("{\"success\":false,\"msg\":\"未检测到上传的图片\"}");
                return;
            }
            if (string.IsNullOrEmpty(postText))
            {
                context.Response.Write("{\"success\":false,\"msg\":\"帖子内容不能为空\"}");
                return;
            }

            // 保存图片到服务器（示例路径，可根据实际调整）
            string saveDir = context.Server.MapPath("~/Uploads/Posts/");
            if (!Directory.Exists(saveDir)) Directory.CreateDirectory(saveDir);
            string fileName = Guid.NewGuid().ToString() + Path.GetExtension(imageFile.FileName);
            string savePath = Path.Combine(saveDir, fileName);
            imageFile.SaveAs(savePath);

            // TODO: 这里添加把帖子内容+图片路径保存到数据库的逻辑

            // 返回成功响应
            string imageUrl = $"~/Uploads/Posts/{fileName}";
            context.Response.Write($"{{\"success\":true,\"msg\":\"发布成功\",\"imageUrl\":\"{imageUrl}\",\"postText\":\"{postText}\"}}");
        }
        catch (Exception ex)
        {
            context.Response.Write($"{{\"success\":false,\"msg\":\"{ex.Message}\"}}");
        }
    }

    public bool IsReusable => false;
}

和UpdatePanel的兼容说明 #

• 这种原生异步上传完全独立于UpdatePanel的回发机制，不会触发任何页面回发，完美符合你的需求。
• 如果上传成功后需要更新UpdatePanel内的内容（比如刷新帖子列表），可以在xhr.onload的成功回调里调用__doPostBack('你的UpdatePanelID', '')，触发UpdatePanel的部分回发，只更新指定区域。

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