javascript onclick 在 chrome 和 IE8 中不起作用，但在 firefox 7.0.1 中起作用

Question

我有这个JavaScript。

<script type="text/javascript">
function HandleBrowseClick()
{
    var fileinput = document.getElementById("userFile");
    fileinput.click();
}
</script>

<script type="text/javascript">
    function callAddUsers() {
            //alert("callAddUsers");
        var fup = document.getElementById('userFile');
    var fileName = fup.value;
        document.f1.action = "addUsers.action";
        document.f1.submit();
    }
</script>

这是我的 HTML..

<input type="file" class="button" id="userFile"
            name="userFile" onChange="callAddUsers();" style="display: none"/> 

<input type="button" class="button" value="Add User" id="fakeBrowse" onclick="HandleBrowseClick();"/>

我使用这种两步调用风格，因为我想为我的文件上传按钮使用特定名称，而不是像“选择文件、浏览……等”这样的默认名称。

问题详细信息。 在 Firefox 中，一切正常。调用操作并正确执行该操作。

在 IE 中，它仍然调用 callAddUsers() 函数，但不调用操作。

在 Chrome 中，它不适用于 fileinput.click();

问题可能出在哪里？

提前谢谢。

Answer 1

表单和表单输入上的 display:none 是使它们不可提交的可靠方法;) 出于安全原因，这是由浏览器完成的。

如果您需要隐藏可见输入 - 给它 opacity: 0.1 或 width: 1px;溢出：隐藏；。

但关于您的具体问题，您可能只想使用 label 标记。它将收到的所有点击转移到专用的输入。因此，您将能够使丑陋的文件输入看起来像您想要的任何方式。

Answer 2

尝试下面的代码

<input id="dummyInput2" size="10" readonly><input type="file" id="userFile" name="userFile" value="" size="1" onchange="callAddUsers(this,\'dummyInput2\')" /><input type="button" class="button" value="Add User" id="fakeBrowse"/>

function callAddUsers(obj,target)
{
    document.getElementById(target).value = obj.value;
    var fup = document.getElementById('userFile');
    var fileName = fup.value;
        document.f1.action = "addUsers.action";
        document.f1.submit();

}
#dummyInput2
{
    z-index :1
    cursor : pointer;
}
#userFile
{
    position:absolute;
    top:xxx;//change to what you wish
    left:xxx;//change to what you wish
    z-index :2;
    opacity : 0;
    filter : alpha(opacity=0);
    cursor : pointer;
}
#fakeBrowse
{
    position :absolute;
    cursor : pointer;
    width : 30px;//change to what you wish
    height: 23px;//change to what you wish
}

希望这对您有帮助。