2013-02-01 51 views
0

我有一個DIV當我點擊它時,它會觸發一個JavaScript來點擊文件上傳按鈕,這是一個display:none。它可以在我的電腦上使用Chrome,Firefox,Chromium。但我想知道爲什麼它不適用於我的朋友電腦。document.getElementById('button')。click()在我的電腦上工作,但不能在另一臺電腦上工作

是因爲瀏覽器問題還是什麼?我和我的朋友使用 不同版本的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'來解決此問題。現在的代碼在任何PC上都可以正常工作。

visibility:hidden只是隱藏了內容的視圖,它仍然會佔據一些空間。因此,我添加了height:0px,以便它具有相同的效果,如display:none

+2

你朋友的機器和瀏覽器是什麼?這是IE的古老版本嗎? –

+0

由於我們對你的朋友的個人電腦一無所知,任何事情都只是猜測。你必須自己調試代碼。如果它「不起作用」,瀏覽器可能會拋出錯誤信息並告訴你爲什麼。 –

+0

另外,這可能是由於用戶錯誤。誰操作你朋友的個人電腦? –

回答

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); 
} 
+0

jQuery不是第二個片段嗎? –

+0

是的,我知道這些都背後是一樣的。但最初我也遇到了同樣的問題,在FF中工作,但在IE中不工作。在不使用jQuery時,在看到第一條評論之前,我給出了第二個選項。這兩種方法對我有幫助。 – spathirana

+0

這就是我所能說的,因爲我不知道瀏覽器的細節 – spathirana

1

this article,您可以使用以下方法來創建一個版本的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]; 
    } 
} 
+0

哪些瀏覽器不支持'getElementById'? –

+1

我覺得我們在說IE4時代,所以reeeeeeealy老了。 –

+4

恐怕IE4不是網絡瀏覽器。這是一個帶有_some_腳本功能的圖形化HTTP客戶端:-) –

相關問題