jquery - 上传 + jQuery UI

Question

到目前为止，除了一个棘手的问题外，我的 uploadify 实现运行得相对顺利。

我在 jquery-ui 对话框模式窗口中有 uploadify 浏览提示。文件上传正常，但对于所选的每个文件项，会出现两个相同的队列项(相同的 ID)。

尽管这两个队列项目似乎都获得了百分比更新，但实际上只有一个队列项目随进度条进行了更新。

文件上传完成后，仅删除这些队列项目之一(与进度条更新的项目相同)。

我在 jquery-ui 对话框模式窗口之外测试了它，双队列项目行为消失了。

如果可能的话，我希望将上传提示和队列保留在模式对话框窗口中。

关于为什么在 jquery-ui 模式窗口中使用 uploadify 会导致这种双队列项目行为的任何线索？

更新:

$("#Filedata").uploadify({
 'scriptAccess': 'allways',
 'uploader'       :'<?php echo base_url();?>js/jquery.uploadify-v2.1.4/uploadify.allglyphs.swf', 
 'script': '<?php echo site_url();?>/upload/process_upload',
 'cancelImg': '<?php echo base_url();?>js/jquery.uploadify-v2.1.4/cancel.png',
 'folder'         : '/',
 'fileDataName'     :'Filedata',
 'buttonText'  : 'Document...',
 'width': '273',
 'height': '51',
 'wmode': 'transparent',
 'auto'           : true, 
 'multi'          : false,
 'fileExt' : '*.pdf;', 'fileDesc' :'Document',
 'sizeLimit' : 10485760,
 'simUploadLimit' : 1,
 'queueSizeLimit' :'1',
 'uploaderType' : 'flash',
 'scriptData' : {'userdata':'<?php echo $userdata;?>','upload_token':'<?php echo $token['value'];?>'},
    onProgress: function() { 
  //hide upload button
  $("object#FiledataUploader").height(0);
    }, 

 //workaround for bug in jQuery UI dialog/upoadify (double progress bars )
 onOpen      : function(event,ID,fileObj) {
  $('#FiledataQueue div.uploadifyQueueItem:first-child').hide();
    },

 onError: function(a, b, c, d) {
 if (d.status == 404)
 alert('Could not find upload script. Use a path relative to: ' + '<?= getcwd() ?>');
 else if (d.type === "HTTP")
 alert('error ' + d.type + ": " + d.info);
 else if (d.type === "File Size")
 alert(c.name + ' ' + d.type + ' Limit: ' + Math.round(d.sizeLimit / 1024) + 'KB');
 else
 alert('error ' + d.type + ": " + d.info);
 },
 onComplete   : function (event, queueID, fileObj, response, data) {
  var r = JSON.parse(response);
  $('#token').val(r['token']);                                    
  $('#uploaded_filename').val(r['uploaded_filename']);
  $('#filename_encryption').val(r['encryption']);
  $('#FiledataQueue').html('Document <span class="bold" style="font-weight:bold;">'+ r['filename'] + '</span>');
 },

 onQueueFull: function(event, queueSizeLimit) {
 // supress dialog that mentions the queue is full
 return false;
 }
}); 

HTML:

  <form id="form-document" method="" action="">
   <input type="file" name="Filedata" id="Filedata" size="20" />
   <input type="hidden" name="response" id="response" value=""/>
   <input type="hidden" name="upload_token" id="upload_token" value=""/>
   <input type="hidden" name="uploaded_filename" id="uploaded_filename" value=""/>
   <input type="hidden" name="filename_encryption" id="filename_encription" value=""/>
   <input type="hidden" name="uploaded_extension" id="uploaded_extension" value=""/>
   <input type="hidden" name="token" id="token" value="<?php echo $token['value'];?>"/>
   </form>

更新2:

jQuery UI 对话框:

 dialog_data.dialog({
  autoOpen: false,
  height: 700,
  width: 800,
  modal: true,
  bigframe: true,
  buttons: {
   'Save': function() {
    $.ajax({
     type: "GET",
     url: "<?php echo site_url();?>/upload/finish",
     dataType: 'html',
     data: $('#form-document').serialize(),
     success: function(){
      oCache.iCacheLower = -1;
      oTable.fnDraw();
      dialog_data.dialog('close');
     }
    });
   },
   'Close': function() {
    $(this).dialog('close');
    $('.loading').hide();
   }
  },
  open: function(){
   $('.loading').hide();
   $("object#FiledataUploader").height(30);
  },
  close: function() {
   $('#uploaded_filename').val('');
   $('#filename_encription').val('');
   $('#FiledataQueue').html('');
  }
 });

Answer 1

您可以尝试检查如果您向文件字段提供另一个 ID 和名称会发生​​什么情况。 Filedata 是上传脚本中使用的变量，无论您为字段指定的 ID/名称是什么，我想知道是否可能不会发生冲突。

所以我建议尝试更改 ID，并将 id 参数添加到您的 uploadify 设置中(使用新 ID 作为值)，然后让我们知道这是否可以解决问题。