jQuery切换Div显隐时file输入框赋值报错问题排查

报错是浏览器安全限制导致的代码执行中断，和if-else分支逻辑本身无关：

• 出于安全防护，所有浏览器禁止通过JavaScript给<input type="file">类型的输入框设置非空的value值，这类输入框的值只能由用户手动选文件后由浏览器自动填充，仅支持赋值空字符串清空已选内容。
• 你代码中$('#fileUpd').val(result.data.FilePath);这行直接给文件输入框赋值后端返回的存储路径，直接触发了DOMException，代码执行到这行就终止，后面的显隐判断、else分支的alert都没有执行，才会出现两个区域同时显示的问题。

• 删除给文件输入框赋值非空路径的错误代码，不要试图给file类型输入框设置自定义初始值。
• 编辑场景下的显隐判断不要依赖文件输入框的files.length属性——这个属性只能读取用户当前在页面上手动选中的文件，读不到后端存储的历史文件信息，直接用接口返回的result.data.FilePath是否为空作为判断依据即可。
• 如果需要提示用户当前已有历史附件，可在文件区域单独加普通文本标签展示文件名，不要把路径填充到文件选择输入框中。

// 接口成功回调内的填充逻辑
$('#noteNameForUpdation').val(result.data.NoteName);
$('#TextDescriptionForUpdation').val(result.data.TextDescription);
// 移除错误代码：$('#fileUpd').val(result.data.FilePath);
$('#hiddenInputFieldList').val(result.data.ListId);
$('#hiddenInputFieldNote').val(item);

// 基于后端返回的文件路径判断是否存在历史附件
const hasSavedFile = Boolean(result.data.FilePath);

// 控制区域显隐
if (!hasSavedFile) {
  alert("Hiding File!!!!");
  $('#TextDivForUpdation').show();
  $('#textDivBrUpd').show();
  $('#FileDivForUpdation').hide();
  $('#fileDivBrUpd').hide();
} else {
  alert("Not Hiding!!!!");
  // 如需展示已有文件，可自行添加普通标签渲染，例：
  // $('#savedFileTip').text(`当前已上传文件：${result.data.FileName}`);
  $('#TextDivForUpdation').hide();
  $('#textDivBrUpd').hide();
  $('#FileDivForUpdation').show();
  $('#fileDivBrUpd').show();
}

如果业务需要支持“保留原有文件/上传新文件替换”的逻辑，可在文件区域增加“替换原有附件”的复选框，默认不选中时隐藏文件选择框、展示原有文件信息，用户勾选后再显示文件选择框；提交表单时如果用户未选择新文件，后端直接保留原有存储的文件路径即可，无需在前端给file输入框赋初始值。

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