使PLUpload与ajax加载的jQuery对话框玩得很好

Question

他是我的自定义jQuery代码:

/* Files */
$(document).ready(function() {
    // -----------------------------------------------------
    // Define Variables
    // -----------------------------------------------------
    var $filesTab = $("#files");
    var $filesList = $("#files-list");
    var $foldersList = $("#file-folders");
    var $uploadBtn = $("#upload-file");
    var objectData = {
        "object" : $filesTab.data("object"),
        "object_id" : $filesTab.data("object-id")
    };
    // -----------------------------------------------------
    // Load data
    // -----------------------------------------------------
    var filesDataTable = $filesList.dataTable({
        "oLanguage" : {
                'sSearch': "Search Files:"
        },
        "iDisplayLength" : 25
    });
    $foldersList.bind("load", function() {
        // Load Folders
        $foldersList.load("/global-ajax/files/get-folders/", objectData);
    }); $foldersList.trigger("load");


    // -----------------------------------------------------
    // Events
    // -----------------------------------------------------
    $uploadBtn.bind("click", function() {
        debug.log("Clicked upload file btn");           
        var uploadFileOptions = objectData;
        // Get data and create modal
        $.get("/global-ajax/files/get-upload-modal/", uploadFileOptions, function(response) {
            debug.log("Ajax returned");
            $(response).dialog({
                draggable: false,
                modal: true,
                resizable: false,
                stack: false,
                title: "Upload a File",
                width: '50%',
                buttons: {
                    'Upload': function() {
                        // submit, do callback
                        var $form = $(this);
                        var serialized_form_data = decodeURIComponent($form.serialize());
                        // console.log("Serialized Form Data: " + serialized_form_data);
                        $form.addClass("loading").find("input, select, textarea").attr("disabled", true);
                        $.post("/global-ajax/files/upload-file/", serialized_form_data, function(json) {
                            $form.removeClass("loading").find("input, select, textarea").attr("disabled", false);
                        }, "json");
                    },
                    'Cancel': function() {
                        $(this).dialog("close");
                    }
                },
                open: function(event, ui) {
                    var uploader = new plupload.Uploader({
                        runtimes : 'gears,html5,flash,silverlight,browserplus',
                        browse_button : 'pickfiles',
                        container : 'file-upload',
                        max_file_size : '10mb',
                        url : 'upload.php',
                        flash_swf_url : '/app/javascript/plupload/plupload.flash.swf',
                        multi_selection : false
                    });

                    uploader.bind('Init', function(up, params) {
                        $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
                    });
                    $('#uploadfiles').live("click", function(e) {
                        uploader.start();
                        e.preventDefault();
                    });
                    uploader.bind('FilesAdded', function(up, files) {
                        $.each(files, function(i, file) {
                            $('#filelist').append(
                                '<div id="' + file.id + '">' +
                                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                            '</div>');
                        });
                        up.refresh(); // Reposition Flash/Silverlight
                    });
                    uploader.bind('UploadProgress', function(up, file) {
                        $('#' + file.id + " b").html(file.percent + "%");
                    });
                    uploader.bind('Error', function(up, err) {
                        $('#filelist').append("<div>Error: " + err.code +
                            ", Message: " + err.message +
                            (err.file ? ", File: " + err.file.name : "") +
                            "</div>"
                        );
                        up.refresh(); // Reposition Flash/Silverlight
                    });
                    uploader.bind('FileUploaded', function(up, file) {
                        $('#' + file.id + " b").html("100%");
                    });             
                    uploader.init();
                }
            });

        });
    });
});

HTML按钮代码:

<div class="g3" id="files-sidebar">
    <a class="btn green icon big i_cloud_upload" id="upload-file" href="javascript:;">Upload File</a>
    <h4>Folders</h4>
    <div id="file-folders"><ul>
    <li title="Drag and drop files to add to folder" class="i_folder selected">CAD Files (3)</li>
    <li class="i_folder">Estimates (1)</li>
    <li class="i_folder">Photos (24)</li>
    <li class="i_folder">Uncategorized (11)</li>
</ul>
<p>You can create a custom folder when uploading or editing a file.</p>
</div>
    </div>

HTML Ajax加载到对话框:

<form id='' method='POST' enctype='multipart/form-data' action=''  class="">
<input type="hidden" name="key" value="3b53c6cd33f342246b5cbd59440dac18" />
    <fieldset>
            <section id="field_description" class="field">
                <label for="description" id="">Description: </label>
                <div>
                    <textarea id="description" name="description" class="textarea maxwidth-400 "   ></textarea>
                    <span></span>
                </div>
            </section>
            <section id="field_revision_no" class="checkbox-field field">
                <label for="revision_no" id="">Upload as New File</label>
                <div>           
                    <input type="radio" id="revision_no" name="revision"  value="no" class="radio "  CHECKED="CHECKED"   />

                </div>
            </section>
            <section id="field_revision_yes" class="checkbox-field field">
                <label for="revision_yes" id="">Upload as Revision</label>
                <div>           
                    <input type="radio" id="revision_yes" name="revision"  value="yes" class="radio "   />

                </div>
            </section>
                <div id="file-upload">
            <div id="filelist"></div>
            <a id="pickfiles" href="#">[Select files]</a>
        </div>
    </fieldset>
</form>

这里有几件事与我的问题无关。所以，为了让你们对我要做的事情有一个基本的了解……我在一个需要项目文件上传能力的管理系统上工作。每个项目都使用jQuery UI选项卡。有一个文件选项卡，上面有一个上传文件的列表，还有一个带有上传文件按钮的侧边栏。该按钮在代码中引用为$uploadBtn。

所有必要的jQuery和PLUpload文件加载到页面上。

我的困难是，我想从一个ajax文件使用jQuery UI对话框小部件加载我的上传表单。每次单击上传按钮时，我都得到了该部分的工作，但PLUpload仅在上传对话框第一次打开时才正确初始化。我试过在对话框的beforeClose处理程序中销毁实例，但这似乎不起作用。

我怎么能使PLUpload初始化正确每次我打开上传对话框，而不是只是第一次!谢谢!

截图

Answer 1

我使用了下面的。remove()方法来删除先前启动的jQuery UI Dialog，并发现它非常成功。

'Close':function()
{
  $(this).dialog('close');
  $(this).remove();
}

Answer 2

$.extend($.ui.dialog.overlay, { create: function(dialog){
  if (this.instances.length === 0) {
    // prevent use of anchors and inputs
    // we use a setTimeout in case the overlay is created from an
    // event that we're going to be cancelling (see #2804)
    setTimeout(function() {
      // handle $(el).dialog().dialog('close') (see #4065)
      if ($.ui.dialog.overlay.instances.length) {
        $(document).bind($.ui.dialog.overlay.events, function(event) {
          var parentDialog = $(event.target).parents('.ui-dialog');
          if (parentDialog.length > 0) {
            var parentDialogZIndex = parentDialog.css('zIndex') || 0;
            return parentDialogZIndex > $.ui.dialog.overlay.maxZ;
          }
          var aboveOverlay = false;
          $(event.target).parents().each(function() {
            var currentZ = $(this).css('zIndex') || 0;
            if (currentZ > $.ui.dialog.overlay.maxZ) {
              aboveOverlay = true;
              return;
            }
          });
          return aboveOverlay;
        });
      }
    }, 1);
    // allow closing by pressing the escape key
    $(document).bind('keydown.dialog-overlay', function(event) {
      (dialog.options.closeOnEscape && event.keyCode
       && event.keyCode == $.ui.keyCode.ESCAPE && dialog.close(event));
    });
    // handle window resize
    $(window).bind('resize.dialog-overlay', $.ui.dialog.overlay.resize);
  }
  var $el = $('<div></div>').appendTo(document.body)
  .addClass('ui-widget-overlay').css({
    width: this.width(),
    height: this.height()
  });
  (dialog.options.stackfix && $.fn.stackfix && $el.stackfix());
  this.instances.push($el);
  return $el;
}});