javascript - 按下按钮时更新 iframe 'src'(表单 ' file' 按钮)

Question

首先我要说的是，我不知道我这样做是否可行，我来这里向专业人士寻求帮助。

正如主题所指出的，我想要实现的是，按下按钮时，我想要加载的内容出现在 iframe 中......

一开始，我做的是这样的:iframe html 是这样的:

<iframe id="my-frame" src=""></iframe>

简单的表单代码是这样的:

<form action="#" method="post" target="my-frame">
<input type="file" name="localFile"  id="localFile">
 <input type="submit" id="Sbtn" name="Sbtn" value="submit">
</form>

哪个应该加载我在iframe中选择的内容，我的目标是“my-frame”，但是当我按按钮，它会加载当前打开的页面，我最终会得到类似的有趣的镜像效果之一，你会在其内部一遍又一遍地看到相同的东西......或者根本不加载任何内容，iframe部分保持白色......

所以我放弃了，并再次尝试了一些 Js，不确定这是否是解决问题的方法，但是......好吧，我必须尝试一些东西。也就是说，我从表单部分取出了“target=”my-frame”，然后将其放入。

var myFrame = document.getElementById("my-frame");
var btn2 = document.getElementById("Sbtn");
var field2 = document.getElementById("localFile");

btn2.onclick = function(){
        if(field2.value ==""){
            //enter error message or something.
        } else {
          myFrame.src = field2.value;
          return false;

        }
}

然后，当我这样做时，我会收到“找不到页面”等错误...无论我做什么，都找不到页面。

我得到的确切错误是这样的:

Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.

我不明白，因为我通过出现的向导导航到文件(无论它是什么)。

现在进行进一步的故障排除，当我执行常规链接时......例如(伪代码)

<a href =" path to local file here " target="the iframe id"></a>

然后它就加载好了......

所以我迷路了。

关于我做错了什么或者......我缺少什么有什么想法吗？

任何提示、链接、任何类型的帮助我都乐意并谦虚地接受。提前致谢。

索姆多 http://somdowprod.net/

Answer 1

据我了解，您想要的是:

• 选择输入 type=file 的文件
• 点击“提交”
• 所选文件应出现在 iframe 内(如您所料)

据我所知，这只能通过 IE 来完成。原因是Chrome和FF的安全设置不同(较高)。您可以尝试使用警报命令来查看 IE、Chrome 和 Firefox 到底发生了什么。只需像这样更改您的代码即可:

...
} else {
  alert(field2.value); ///--- add this line
  myFrame.src = field2.value;
  return false;
}
...

使用所有 3 种主要浏览器(IE、Chrome、FF)打开您的文件，并在选择文件并分别单击提交按钮时查看每种浏览器的结果。

<小时/>

根据我的测试，IE 的结果是硬盘上文件的完整路径:

C:\Documents and Settings\DUNGPRO\My Documents\A WALLPAPER\abc.jpg

当 Chrome 用 fakepath 替换路径时:

C:\fakepath\abc.jpg

Firefox 只给你文件名:

abc.jpg

是的，仅假路径或文件名会导致显示 404-找不到文件。只有 IE 才能为您提供预期的路径，这就是您的代码可以在 IE 上正常运行的原因。

希望您不会觉得这太糟糕了，而 Chrome 和 FF 中的这些设置几乎都是默认设置，无法在您的代码中更改。只是认为它们是为了用户的安全并寻找另一种方法。祝你好运。