Question

可能重复：
In JavaScript can I make a “click” event fire programmatically for a file input element?

我想点击一次上传，因此我将<form>隐藏在<iframe>这样的内容中（我只是在<iframe>周围输入<form>标签来隐藏表单）：< / p>

<iframe id="iframe" name="iframe" height="1" width="1" frameborder="0">
    <form id="form1" enctype="multipart/form-data" method="post" action="uploaded.php">
        <div class="row">
        <label for="file">Select a File to Upload (up to 20MB)</label><br />
        <input type="file" name="file" id="file" size="40" onchange="uploadFile()" />
        </div>
    </form>
</iframe>

然后在<iframe>之外我做了一个按钮：

<div align="center">
    <input type="button" value="Upload" align="center" onclick="browse();" />
</div>

browse（）javascript是这样的：

function browse()
{
    var iframe = document.getElementById.("iframe");
    var input = iframe.contentDocument || iframe.contentWindow.document;
    input.getElementById('file').click();
}

但它不起作用。浏览文件对话框无法打开。我正在使用Firefox 17。有没有办法在<input>内的<iframe>或任何其他一键上传解决方案上点击（），但仍然使用我的uploadFile（）AJAX函数？

function uploadFile() {
        var fd = new FormData();
        fd.append("file", document.getElementById('file').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "uploaded.php");
        xhr.send(fd);
      }

编辑：当表单不在iframe中时这是有效的，所以我的问题不在于我是否可以在<input type="file">上使用click（）。我可以，它在Firefox 17中工作。我的问题是如何在<input type="file">内的<iframe>上使用click（）。

Answer 1

由于您的类型具有额外的.

，因此JavaScript应该抛出错误

var iframe = document.getElementById.("iframe");  
                                    ^-- typo

Answer 2

<iframe>的子元素是浏览器不支持iframe时使用的替代内容。它们不构成加载到框架中的文档的一部分（这是contentDocument可以访问的文件）。

您的问题（或至少是您的第一个问题）是您尝试将其用作黑客来隐藏内容。不要那样做。

jrame点击iframe中的元素

2 个答案: