0

他是我的自定义 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 文件。

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

如何让 PLUpload 每次打开上传对话框时都正确初始化，而不是第一次！谢谢！

截屏

4

2 回答 2

1

我使用 .remove() 的以下用法来元素先前启动的 jQuery UI 对话框，并发现它非常成功。

'Close':function()
{
  $(this).dialog('close');
  $(this).remove();
}
于 2011-09-05T22:05:38.580 回答
0 
$.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;
}});
于 2011-12-15T22:48:38.507 回答