Uploadify + jQuery UI

moj*_*ime 6 jquery user-interface jquery-ui uploadify

到目前为止,我的uploadify实现运行相对顺利,除了一个唠叨的问题.

我在jquery-ui对话框模式窗口中有我的uploadify浏览提示.文件上传得很好但是对于选择的每个文件项,会出现两个相同的队列项(相同的ID).

这些队列项中只有一个实际上是使用进度条更新的,尽管两者似乎都获得了百分比更新.

文件上载完成后,仅删除其中一个队列项(使用进度条更新的队列项).

替代文字

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

如果可能的话,我希望保持uploadify提示并在模式对话框窗口中排队.

关于为什么在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;
 }
}); 
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

更新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('');
  }
 });
Run Code Online (Sandbox Code Playgroud)

Nab*_*bab 1

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

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