嘿，这个需求其实很好实现，核心就是在上传成功的时机触发移除上传区域的操作，我分两种最常见的场景给你详细说明：

1. 异步（AJAX）上传场景（推荐，无页面刷新） #

现在大多网站都会用异步上传，这样用户体验更好。你的上传区域在#upload这个容器里，我们只需要在上传成功的回调里把这个容器移除就行。

代码示例： #

// 获取上传表单和上传区域元素
const uploadForm = document.querySelector('#upload form');
const uploadArea = document.getElementById('upload');

// 给表单绑定提交事件
uploadForm.addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止表单默认跳转行为

  // 组装表单数据（包含上传的图片文件）
  const formData = new FormData(uploadForm);

  try {
    // 发送上传请求
    const response = await fetch(uploadForm.action, {
      method: uploadForm.method || 'POST',
      body: formData
    });

    // 判断上传是否成功（后端返回2xx状态码）
    if (response.ok) {
      // 彻底移除上传区域，腾出页面空间
      uploadArea.remove();
      // 如果你只是想隐藏而不是永久删除，也可以用：uploadArea.style.display = 'none';
      
      // 这里可以添加代码，把上传后的图片预览/信息插入到页面中
    } else {
      console.error('上传失败，请重试');
    }
  } catch (error) {
    console.error('上传请求出错：', error);
  }
});

关键逻辑说明： #

• 用e.preventDefault()阻止表单默认的页面跳转，实现无刷新上传
• 当后端返回成功响应（response.ok为true），调用remove()方法把整个#upload元素从DOM中删除，彻底释放页面空间
• 如果需要保留上传区域只是隐藏，用display: none更灵活，但remove()更彻底

2. 传统表单提交（页面刷新）场景 #

如果你的项目还是用传统的表单提交（上传后页面会刷新），那前端没法直接判断，需要后端配合控制上传区域的渲染：

示例（以PHP为例）： #

<?php
// 初始化上传状态为失败
$isUploadSuccess = false;

// 处理表单提交的上传逻辑
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 这里写你的图片上传处理代码
  // 上传成功后，把状态改为true
  $isUploadSuccess = true;
}
?>

<!-- 只有当上传未成功时，才渲染上传区域 -->
<?php if (!$isUploadSuccess): ?>
<div id="upload">
  <h2>Last opp et bilde her!</h2>
  <form action="" method="POST" enctype="multipart/form-data">
    <!-- 你的表单控件，比如文件选择框、提交按钮 -->
    <input type="file" name="image" required>
    <button type="submit">上传图片</button>
  </form>
</div>
<?php endif; ?>

<!-- 上传成功后，显示图片及相关信息 -->
<?php if ($isUploadSuccess): ?>
<div class="image-container">
  <!-- 这里放上传后的图片预览和信息 -->
  <img src="path/to/your/uploaded/image.jpg" alt="上传的图片">
  <p>图片上传成功！</p>
</div>
<?php endif; ?>

关键逻辑说明： #

• 后端通过判断上传是否成功的状态，决定是否输出#upload区域
• 页面刷新后，只有上传未成功时才会显示上传按钮和文本，成功后直接显示图片内容

额外提示：第三方上传组件的处理 #

如果你用的是像FilePond、Dropzone这类第三方上传组件，它们都自带上传成功的回调事件，直接在回调里执行移除操作即可。比如Dropzone的示例：

Dropzone.options.myDropzone = {
  success: function(file, response) {
    // 上传成功后移除上传区域
    document.getElementById('upload').remove();
  }
};

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