javascript - 在 KnockoutJS 和 HTML 中选择同一文件时，输入文件选择事件不会触发

Question

这可能对 JQuery 有一个简单的解决方案，但我很难用 KnckoutJS 来解决。 当我选择相同的文件时，事件不会触发。
我有一个像这样的html

                    <label class="upload">
                        <input id="documentattachment" name="documentattachment" multiple type="file" data-bind="event: { change: function() { uploadSelected($element.files) } }" />
                        {{texts().attachmentFile}}
                    </label>

在 View 模型中我有这样的代码。

function uploadSelected(file) {

            if (!vm.uploadOnSubmit()) {
                if (!session.hasPermission(session.permissions.Documents, vm.clientNr())) {
                    toastr.error(vm.texts().permissionDenied);
                    return false;
                } else {
                    var att = new Attachment(
                        file[0].lastModifiedDate,
                        file[0].name,
                        0,
                        (vm.uploadOnSubmit() ? true : false));
                    vm.attachments.push(att);
                    vm.fileDatas.push(file[0]);
                    return true;
                }
            } 
        }

我的问题是，即使我选择相同的文件，如何获取文件。
谢谢

Answer 1

这是 knockout 中的文件上传示例:

<input type="file" data-bind="event: {change: onFileChange}" id="fileUploadId">

<input type="button" data-bind="event: {click: resetFileInput}" value="Reset">

下面是 knockout js:

fileInput: any;

onFileChange(data, e) {
   this.uploadFile(data, e)
}

uploadFile(data, e) {

        var url = "/someUrl";
        this.fileInput = e.target;

        // getting file here
        var file = e.target.files[0];
       // preparing form data to post by uploading
        var formData = new FormData();
        formData.append("thefile", file);

        var xhr = new XMLHttpRequest();

       // posting the data to url
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                // ...
            } else {
               // ...
            }

        }
        xhr.send(formData);
        return true;
    }
     // something like this
     resetFileInput() {
            if (this.fileInput) {
                $(this.fileInput).val("");
            }
       }