如何在文件输入中显示存在的文件

时间:2018-05-09 08:40:01

标签: javascript jquery knockout.js bootstrap-modal

我正在尝试一个简单的Web应用程序。我有数据并在kendo网格中显示多列(DocumentCategory,ShortDescription,FileName,DocumentType和FileSize)其他列是EDIT和DELETE。当我单击EDIT打开弹出窗口并显示DocumentCategory,ShortDescription,DocumentType但我无法在文件输入中显示存在的文件。我把文件输入属性(data-bind =" value:fileName")放在里面,但它不起作用。我怎么能这样做?

这是我的弹出窗口HTLM代码。



<div id="static" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="documentForm" data-bind="with:model">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">@T("Admin.Language.Add")</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger display-hide">
                            <button class="close" data-close="alert"></button>@T("Admin.FillRequiredFields.Message")
                            <ul id="errors"></ul>
                        </div>                       
                        <div class="form-group row">
                            <label class="col-md-2 control-label">@T("Admin.Document.Type")</label>
                            <div class="col-md-10">
                                <select data-bind="options: $root.documentTypes, optionsText: 'value',optionsValue: 'key', value:documentType, optionsCaption: '@T("Choose")'" class="sbs-select form-control" name="type"></select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-2 control-label">@T("Admin.Document.DocumentCategory")</label>
                            <div class="col-md-10">
                                <select data-bind="options: $root.documentCategories, optionsText: 'nameString',optionsValue: 'id', value:documentCategoryId, optionsCaption: '@T("Choose")'" class="sbs-select form-control" name="parentId"></select>
                            </div>
                        </div>    
                        <div class="form-group row">
                            <label class="col-md-2 control-label">@T("Admin.Document.Description")</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" name="description" data-bind="value:description" />
                            </div>
                        </div>
                        // Here is File Input
                        <div class="form-group row">
                            <label class="col-md-2 control-label">@T("Admin.Document.File")</label>
                            <div class="col-md-10">
                                <input id="fileLoader" type="file" class="file" name="document">
                            </div>
                        </div>                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" data-bind="click: $root.closePopup" class="btn default">@T("Cancel")</button>
                        <button type="button" class="btn green" data-bind="click: $root.saveLang">@T("Save")</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
&#13;
&#13;
&#13;

&#13;
&#13;
function updateRow(me) {
            var model = getRowAsModel(me);           
 ko.contextFor(document.getElementById("container")).$data.openPopup(model);}
&#13;
&#13;
&#13;

这是我的JS代码

&#13;
&#13;
self.model =  ko.observable({
            description: ko.observable(),
            documentCategory: ko.observable(),
            documentCategoryId: ko.observableArray(),
            documentType: ko.observable(),
            documentTypeId: ko.observable(),
            fileName: ko.observable(),
            fileSize: ko.observable(),
            id: ko.observableArray()
        });

    self.openPopup = function (data) {
            $("#static").modal("show");
            if (data.id) {
                self.model().id(data.id);
                self.model().fileSize(data.fileSize);
                self.model().fileName(data.fileName);
                self.model().documentTypeId(data.documentTypeId);
                self.model().documentType(data.documentType);
                self.model().documentCategoryId(data.documentCategoryId);
                self.model().documentCategory(data.documentCategory);
                self.model().description(data.description);
            }
    }
    self.closePopup = function () {
        $("#static").modal("hide");
        reset(self.model, []);
    }
&#13;
&#13;
&#13;

这是弹出窗口的截图

enter image description here

0 个答案:

没有答案