Пока что моя реализация uploadify работает относительно гладко, за исключением одной неприятной проблемы.
У меня есть запрос на загрузку в модальном окне диалога jquery-ui.
Файлы загружаются нормально, но для каждого выбранного элемента файла появляются два идентичных элемента очереди (один и тот же идентификатор).
Только один из этих элементов очереди фактически обновляется с помощью индикатора выполнения, хотя, похоже, оба получают процент обновления.
Когда загрузка файла завершена, удаляется только один из этих элементов очереди (тот же, который обновляется с помощью индикатора выполнения).
Я протестировал его за пределами модального окна диалога jquery-ui, и поведение элемента двойной очереди исчезло.
Я бы хотел сохранить приглашение и очередь загрузки в модальном диалоговом окне, если это возможно.
Есть ли какие-либо подсказки относительно того, почему использование uploadify в модальном окне jquery-ui вызывает такое поведение элемента двойной очереди?
UPDATE:
$("#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('');
}
});