Загрузить внутри диалогового окна пользовательского интерфейса Jquery => Ошибки Chrome и Opera

ProgramBox

Загрузить внутри диалогового окна пользовательского интерфейса Jquery => Ошибки Chrome и Opera

Post author:admin
Запись опубликована:1 мая, 2023
Post category:Вопросы по программированию

#jquery #jquery-ui #google-chrome #opera #uploadify

#jquery #jquery-пользовательский интерфейс #google-chrome #opera #uploadify

Вопрос:

У меня есть следующий код:

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.8.9.custom.css" />
        <script type="text/javascript" src="jquery-1.5.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
        <script type="text/javascript" src="jquery.uploadify.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            manualLightboxContent = function ()
            {
                $("#dialogContent").html($('#module_wrapper').html());
                $("#dialogContent").dialog( { 'modal': true } );
            }
        </script>
        <a href="#" onclick="manualLightboxContent();">Open</a>
        <div id="dialogContent" style="display:none;"></div>

        <div id="module_wrapper" style="display:none;">
            <script type="text/javascript">
            $().ready(function() {
                $('#uploadFile').uploadify({
                    'swf'  : 'uploadify.swf',
                    'fileObjName' : "uploadFile"
                });
            });
            </script>
            <input id="uploadFile" type="file" name="uploadFile" />
        </div>
    </body>

</html>

Я не могу найти причину, но в Chrome я не могу открыть окна просмотра. Точно так же, как если бы какой-то невидимый div плавал над swf.

В opera ошибка менее важна: текст «ВЫБРАТЬ файлы» находится под swf, а не над.

Если uploadify находится за пределами диалогового окна пользовательского интерфейса jquery, он работает просто отлично.

Кто-нибудь может объяснить мне, почему возникает эта ошибка?

Редактировать: Используя Uploadify 3.

Ответ №1:

Недавно у меня была такая же проблема, немного просмотрев код, я заметил следующее в строке 193:

 jQuery('#'   swfuploadify.movieName).css({position: 'absolute', 'z-index': 1, 'left' : '0px'});

Простое изменение z-индекса на 9999 сработало для меня

 jQuery('#'   swfuploadify.movieName).css({position: 'absolute', 'z-index': 9999, 'left' : '0px'});

Ответ №2:

Если вы не хотите изменять основные коды, просто добавьте следующее правило css на свою страницу.

 .swfupload {
    z-index: 100000 !important;
}

Ответ №3:

Я перепробовал все решения, но безрезультатно.

На странице есть 3 экземпляра uploadify.

Как показано на рисунке, на главной странице есть диалоговое окно или наложенный div. Когда я нажимаю на ВЫБРАННЫЕ файлы, не отображается диалоговое окно просмотра

http://lh5.ggpht.com/cZ-V3g6IwQ2ke-9NDfv3GYh8ra9YypCs4V60Md_s7W3Rawzg2IcT2WT9HoqX40kaSstF=s170

Это исходный код страницы

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

  <title></title>
</head>

<body>
  <div id="upload_vi" style=
  "background-color:#e8e8e8; border: 1px solid rgb(0, 0, 0); position:absolute; display:none; width:280px; padding: 4px;"
  class="ui-draggable">
    <div style="padding:5px;">
      <a id="close" onclick="$('#upload_vi').hide()" style="color:#888888; float: right"
      name="close"><img src="images/close_btn.jpg" border="0" /></a>
    </div><br />

    <form id="fiuploader2" name="fiuploader2">
      <input type="hidden" name="edit_item_id2" id="edit_item_id2" value="" /><br />
      <input type="hidden" name="spicname2" id="spicname2" value="" /><input type=
      "hidden" name="sorgname2" id="sorgname2" value="" /> <input type="file2" name=
      "file2" id="file2" style="display: none;" /><object type=
      "application/x-shockwave-flash" data="/js/uplodify/uploadify.swf" width="120"
      height="30" id="file2Uploader" style="visibility: visible;">
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="flashvars" value=
        "uploadifyID=file2amp;amp;pagepath=/members/amp;amp;script=http://localhost/members/multiSrv.phpamp;amp;folder=/files/cityguide/amp;amp;scriptData=asy_up=1&cityguide=1&video=1amp;amp;width=120amp;amp;height=30amp;amp;wmode=transparentamp;amp;method=POSTamp;amp;queueSizeLimit=1amp;amp;simUploadLimit=1amp;amp;fileDesc=Videos (.avi, .flv)amp;amp;fileExt=*.avi;*.flvamp;amp;sizeLimit=2000000amp;amp;fileDataName=Filedata" />
      </object>

      <div id="file2Queue" class="uploadifyQueue"></div><br />
      <a onclick="$('#file2').uploadifyUpload()" style=
      "color: darkblue; font-size: 12px; cursor: pointer; cursor: hand; text-decoration: underline;">
      <b>Upload</b></a><br />

      <div id="hlptxt2">
        Please choose a .avi, .flv file.<br />
        Maximum size 2MB
      </div><br />
      <input type="hidden" name="type2" id="type2" value="videos" />
    </form>
  </div>
</body>
</html>