iframe内嵌文件上传表单二次调用时资源URL异常问题求助

第一次提交表单后，iframe的文档URL会被更新为表单的action地址（即./Classes/UploadFile.ashx）。当你第二次调用ShowForm()时，设置的相对路径./Classes/UploadFile.ashx是基于iframe当前的URL来解析的，而非父页面的URL。此时iframe的URL已经是/Classes/UploadFile.ashx，相对路径解析后就变成了/Classes/Classes/UploadFile.ashx，因此返回404错误。

另外你代码里存在一个小疏漏：form标签的开头未闭合，缺少了>，需要补上。

有两种常见的修复方式：

1. 使用绝对路径 #

将表单的action改为绝对路径（去掉前缀./），这样无论iframe当前的URL是什么，都会直接指向根目录下的目标文件：

function ShowForm() {
    window.frames[0].document.body.innerHTML =
    "<form method='post' enctype='multipart/form-data' action='/Classes/UploadFile.ashx'>" +
    "Select a file to upload, then click 'Upload' to continue." +
    "<input type='file' name='filename' id='filename' />" +
    "<input type='submit' value='Upload' />" +
    "</form>";

    document.getElementById("upload_file_form").style.display = "block";
}

2. 重置iframe的基准URL #

每次调用ShowForm()时，先将iframe的src重置为空白页面，让它的基准路径恢复为父页面的路径，再设置表单内容：

function ShowForm() {
    const uploadFrame = document.getElementById('upload_frame');
    // 重置iframe的src，恢复基准路径
    uploadFrame.src = 'about:blank';
    
    // 等待iframe加载完成后再设置内容
    uploadFrame.onload = function() {
        uploadFrame.contentDocument.body.innerHTML =
        "<form method='post' enctype='multipart/form-data' action='./Classes/UploadFile.ashx'>" +
        "Select a file to upload, then click 'Upload' to continue." +
        "<input type='file' name='filename' id='filename' />" +
        "<input type='submit' value='Upload' />" +
        "</form>";
        
        document.getElementById("upload_file_form").style.display = "block";
    };
}

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