为 Infragistics IgniteUI igFileUpload 重置 UI

Question

我正在使用 Infragistics IgniteUI 2014.1.

我在页面上有一个 igFileUpload 控件，允许用户上传文件。控件开始时是一个简单的 "Upload File" 按钮，但是一旦选择了文件，它就会更改为显示进度条、取消按钮等（此行为内置于控件中）。如果用户上传 x 个文件，将显示 x 个进度条。

我的问题是我需要一种方法来重置 UI 以在用户完成上传文件后显示没有进度条的简单 "Upload File" 按钮。

这是相关的标记：

<div class="col-md-12">
    <div id="DIVUploadNewFile" class="form-group">
        <label class="control-label" for="FUNewFile">Upload New File</label>
        <div id="FUNewFile"></div>
    </div>
</div>

我尝试删除代表 igFileUpload 控件的 DOM 元素，然后将其添加回页面并按以下方式重新初始化：

// remove the FileUpload div
$("#FUNewFile").remove();

// add the FileUpload div back to the document
$("#DIVUploadNewFile").append($("<div id='FUNewFile'></div>"));

// reinitialize the FileUpload control in exactly the same way that
// I have always done on $(document).ready()
$("#FUNewFile").igUpload({
    mode: 'multiple',
    multipleFiles: true,
    maxUploadedFiles: 5,
    autostartupload: true,
    progressUrl: "IGUploadStatusHandler.ashx",
    maxSimultaneousFilesUploads: 2,
    controlId: "serverID1"
});

运行此代码后检查页面时，找不到 igFileUpload 控件。

Answer 1

您可以销毁然后重新创建小部件。删除内部 DOM 不会删除小部件。你可以这样做：

if ($("#FUNewFile").data("igUpload")) {
    $("#FUNewFile").igUpload("destroy");
}
$("#FUNewFile").igUpload({
    mode: 'multiple',
    multipleFiles: true,
    maxUploadedFiles: 5,
    autostartupload: true,
    progressUrl: "IGUploadStatusHandler.ashx",
    maxSimultaneousFilesUploads: 2,
    controlId: "serverID1"
});

为 Infragistics IgniteUI igFileUpload 重置 UI

Reset the UI for Infragistics IgniteUI igFileUpload

jquery

infragistics

ignite-ui