0

私はDIVそれをクリックすると、javascriptがトリガーされてファイルアップロードボタンをクリックしますdisplay:none。Chrome、Firefox、Chromiumを搭載したPCで動作します。しかし、なぜそれが私の友人のPCで機能しないのだろうか。

ブラウザの問題なのか、それとも何なのか？私と私の友人は異なるバージョンの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のバージョンは私のものと私の友人の間で異なるため、私のPCでは機能しますが、私の友人のPCでは機能しません。ただし、。に置き換えることstyle='display:none'でこの問題を解決できstyle='visibility:hidden;height:0px'ます。これで、コードはどのPCでも正常に機能します。

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 に答える