Django实现PDF文件更换时的用户确认功能求助

开发Django文件上传功能时遇到以下问题：现有表单支持PDF文件上传及更换操作，希望在用户更换已上传的PDF时弹出确认提示，但当前前端JS实现会在首次上传时也触发提示，求最优解决方法。

当前实现代码 #

<form enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <table>
    {{ form.as_table }}
    </table>
    <input type="submit" value="Submit">
    <input class="deleter" type="submit" value="Delete">
    {% include "some_html.html" %}
</form>
<script>
  // Add event listener to change button
  function confirmFileChange() {
    var fileInput = document.getElementById('id_file');
    fileInput.addEventListener('change', function() {
      if (fileInput.value) {
        if (!confirm('Are you sure you want to change the uploaded PDF?')) {
          fileInput.value = '';
        }
      }
    });
  }

  if (document.body.innerHTML.indexOf('Change: ') !== -1) {
    confirmFileChange();
  }
</script>

最优解决思路 #

核心是精准区分「首次上传」和「更换已上传文件」场景：只有当表单已存在上传的PDF时，才在用户选择新文件时触发确认提示。

方法1：后端传递明确状态标识（最可靠） #

利用Django表单实例的状态，在页面中添加隐藏标记，JS根据标记判断是否启用确认逻辑。

修改后HTML代码

<form enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <table>
    {{ form.as_table }}
    </table>
    <!-- 后端判断是否已有上传文件，添加隐藏标记 -->
    {% if form.instance.file %}
    <input type="hidden" id="has_existing_file" value="true">
    {% endif %}
    <input type="submit" value="Submit">
    <input class="deleter" type="submit" value="Delete">
    {% include "some_html.html" %}
</form>

修改后JS代码

function confirmFileChange() {
  const fileInput = document.getElementById('id_file');
  fileInput.addEventListener('change', function() {
    // 仅当已有文件且用户选择了新文件时，弹出确认
    if (this.value && document.getElementById('has_existing_file')) {
      if (!confirm('确定要更换已上传的PDF吗？')) {
        this.value = '';
      }
    }
  });
}

// 页面加载后直接初始化，状态由后端控制
document.addEventListener('DOMContentLoaded', confirmFileChange);

方法2：优化DOM检测逻辑 #

原方案依赖检测Change:文本的方式不可靠（易受页面其他内容干扰），改为直接查找Django自动生成的已上传文件显示元素：

function confirmFileChange() {
  const fileInput = document.getElementById('id_file');
  // 查找file input附近的已上传文件展示元素（Django默认会生成）
  const existingFileEl = fileInput.parentElement.querySelector('a, span');
  const hasExistingFile = existingFileEl && existingFileEl.textContent.trim();

  if (hasExistingFile) {
    fileInput.addEventListener('change', function() {
      if (this.value && !confirm('确定要更换已上传的PDF吗？')) {
        this.value = '';
      }
    });
  }
}

document.addEventListener('DOMContentLoaded', confirmFileChange);

原方案失效原因 #

原代码通过document.body.innerHTML.indexOf('Change: ')判断是否已有文件，但这种方式依赖页面文本内容，若页面其他区域包含相同文本，或DOM渲染时机异常，会导致首次上传也触发确认逻辑。后端传递明确状态是最稳定的解决方案。

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