0

我有一个DIV当我点击它时，它会触发一个 javascript 点击文件上传按钮，它是display:none. 它可以在我的电脑上使用 Chrome、Firefox、Chromium。但我想知道为什么它在我朋友的电脑上不起作用。

是浏览器问题还是什么？我和我的朋友使用不同版本的 Ubuntu。当他们点击 DIV 时没有任何反应

这是我的代码

<div onclick='uploadphoto()' title='Click to edit Profile Picture'></div>

<form action="js/ajaxuploadprofile.php" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" style='display:none'>
    <input type="hidden" name="maxSize" value="2000000" />
    <input type="hidden" name="maxW" value="700" />
    <input type="hidden" name="fullPath" value="images/profilepic/" />
    <input type="hidden" name="relPath" value="../images/profilepic/" />
    <input type="hidden" name="colorR" value="255" />
    <input type="hidden" name="colorG" value="255" />
    <input type="hidden" name="colorB" value="255" />
    <input type="hidden" name="maxH" value="700" />
    <input type="hidden" name="filename" value="filename" />
    <input type="file" id='filename' name="filename" onchange="ajaxUpload(this.form,'js/ajaxuploadprofile.php?filename=name&amp;maxSize=2000000&amp;maxW=700&amp;fullPath=images/profilepic/&amp;relPath=../images/profilepic/&amp;colorR=255&amp;colorG=255&amp;colorB=255&amp;maxH=700','upload_area','File Uploading Please Wait...&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; Error in Upload, check settings and path info in source code.'); return false;" />
</form>

<script type='text/javascript'>
function uploadphoto()
{
    el = document.getElementById('filename');
    if (el.onclick) 
    {
       el.onclick();
    } 
    else if (el.click) 
    {
       el.click();
    }
//$('#filename').click(); // <-- this also works for me but not my friend
//document.getElementById('filename').click(); // <-- same
}
</script>

更新的解决方案

最近我发现style='display:none'在某些浏览器中会出现一些问题（或者可能是由于浏览器的版本）。就我而言，我和我朋友的 Chrome 版本不同，因此它适用于我的电脑，但不适用于我朋友的电脑。但是，我可以通过替换style='display:none'为style='visibility:hidden;height:0px'. 现在的代码在任何电脑上都可以正常工作。

visibility:hidden只是隐藏内容的视图，它仍然会占用一些空间。因此我添加height:0px了它，以便它具有相同的效果display:none。

4

2 回答 2

4

可能是浏览器问题。例如，它可能会导致 IE 出现问题。如果您使用的是 jQuery，您可以执行以下操作：

$('#button').trigger('click');

或者你可以尝试如下：

if( document.createEvent ) {
    var evt = document.createEvent("MouseEvents");  
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
    document.getElementById('button').dispatchEvent(evt);
} else if( document.createEventObject ) { // For IE 8 and below
    var evObj = document.createEventObject();
    document.getElementById('button').fireEvent('onclick', evObj);
}
于 2013-02-01T09:22:36.250 回答
1

根据这篇文章，您可以使用以下内容创建一个版本getElementById，即使在非常旧的浏览器上也能正常工作：

function getElement (id)
{
    if (document.getElementById)
    {
        return document.getElementById(id);
    }
    else if (document.all)
    {
        return window.document.all[id];
    }
    else if (document.layers)
    {
        return window.document.layers[id];
    }
}
于 2013-02-01T09:25:12.663 回答