Question

我正在使用jQuery将文件从客户端上传到我的服务器。然后，我使用Knockout获取文件名并从服务器上现在的文件中获取信息。但是，我有两个问题：

淘汰可观察的“文件名”仅在第一次选择文件时更新一次。
未显示文件名。

我知道这与Knockout和jQuery的交互有关，但我还没弄清楚是什么。我正在使用Knockout 2.2.1，jQuery 1.9.2和here的文件上传。我还没能用jsFiddle复制它;当我这样做时，我会更新我的问题。

HTML：

<script type="text/jscript">
    jQuery(function ($) {
        'use strict';
        // Initialize the jQuery File Upload widget:
        $('#fileupload').fileupload();
    });
</script>
<div id="fileupload">
    <form action="FileUploadHandler.ashx" method="post" enctype="multipart/form-data">
        <input type="file" name="files[]" data-bind="value: filename"/>
    </form>
</div>
<input type="button" value="Upload" data-bind="click: uploadFile">

KO：

self.filename = ko.observable("");
self.uploadFile = function () {
    if (self.filename() == "") {
        alert('Please choose a file to upload.');
    }
    else {
        promiseLoad = callLoad();
        $.when(
                promiseLoad
            )
            .done(function () {
                showHide('LoadingPanel', false, true);
            });
    }
};

self.callLoad = function () {
    return $.Deferred(function (dfd) {
        service.callServiceMethod("GetTempData", JSON.stringify({
            Filename: self.filename()
        }), function (msg) {
            if (msg.d.Alert) {
                alert("Success");
            };
            dfd.resolve();
        });
    }).promise();
};

注意：实际上传是通过FileUploadHandler.ashx进行的，并且没有与淘汰赛相同的问题（在第一次正确上传后选择的文件，但不更新文件名）。

Answer 1

通过将jQuery文件上传中的replaceFileInput设置为false而不是true，可以解决这两个问题。如果为true，则克隆该值并且不显示文件名;如果为false，则值保持原样（让它绑定到KO）并正常显示。（感谢评论者让我走上正轨。）

Knockout observable只在jquery表单中更新一次

1 个答案: