私は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&maxSize=2000000&maxW=700&fullPath=images/profilepic/&relPath=../images/profilepic/&colorR=255&colorG=255&colorB=255&maxH=700','upload_area','File Uploading Please Wait...<br /><img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' />','<img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /> 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
。