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>

在viewmodel中我有这样的代码。

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

以下是淘汰赛中的文件上传示例：

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

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

下面是淘汰赛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("");
            }
       }

Answer 2

找到了解决方法，但不是很好的解决方案。

<i style="cursor:pointer;" title="{{$parent.texts().delete}}" class="fa fa-trash fa-fw" data-bind="click: function(){ $root.removeAttachment(this); }"></i>

添加了删除按钮并重置了那里的文件内容。

function removeAttachment(file) {
            document.getElementById("documentattachment").value = "";   //resetting the file input             
            vm.attachments.removeAll();
            vm.fileDatas.removeAll();
        }

在KnockoutJS和HTML中选择相同文件时，输入文件选择事件未触发

2 个答案: