Javascript 如何验证被动表单中的输入类型文件大小

我没有获取所选文件的文件列表。当我们控制台event.target.files[0]时，它显示为未定义。 预期-如果获得event.target.files[0]，则可以访问文件大小

HTMl 组件技术

---

首先，您应该删除接口[定义类型]中的event:any，如果您愿意这样做的话。它会让你知道发生了什么。事件未定义的原因

event: {} //define the interface

我是这样做的。 导出函数fileSizeValidator（事件：{}）

但无法获取文件列表。 你能编辑上面的代码吗？

---

如果我将获得文件列表，那么验证器将以反应形式工作。

解决方案

requireFileTypeValidator.ts a组件.ts AComponent.html

上传投递邮件：
文件是必需的
不允许使用{{fileType}}类型
不允许使用{fileSize}}KB大小。

import { AbstractControl, FormControl } from "@angular/forms";
export function fileSizeValidator(event: any) {
  return function(control: FormControl) {
    // return (control: AbstractControl): { [key: string]: any } | null => {
    const file = control.value;
    if (file) {
      //   var file_list = e.files.items(0);
      console.log(event.currentFiles + "eventttttttttttttttttttttt");
      var path = file.replace(/^.*[\\\/]/, "");
      const fileSize = FileList[0];

      const fileSizeInKB = Math.round(fileSize / 1024);

      if (fileSizeInKB >= 12) {
        return {
          requiredFileType: true
        };
      } else {
        return null;
      }
      return null;
    }
    return null;
  };
}

this.addSlot
        .get("FileUpload")
        .setValidators([
          Validators.required,
          FileValidator.validate,
          fileSizeValidator(event),
          requiredFileType(["jpg", "png", "txt"])
        ]);

event: {} //define the interface

import { AbstractControl, FormControl } from "@angular/forms";
export function requiredFileType(type: string[]) {
  return function(control: FormControl) {
    // return (control: AbstractControl): { [key: string]: any } | null => {
    const file = control.value;
    var existValue: boolean = false;
    if (file) {

      var path = file.replace(/^.*[\\\/]/, "");

      const extension = path.split(".")[1].toUpperCase();
      for (var i = 0; i < type.length; i++) {
        let typeFile = type[i].toUpperCase();
        if (typeFile === extension.toUpperCase()) {
          existValue = true;
        }
      }
      if (existValue == true) {
        return null;
      } else {
        return {
          requiredFileType: true
        };
      }
    }
    return null;
  };
}

    import { AbstractControl, FormControl } from "@angular/forms";
    export function fileSizeValidator(files: FileList) {
      return function(control: FormControl) {
        // return (control: AbstractControl): { [key: string]: any } | null => {
        const file = control.value;
        if (file) {
          var path = file.replace(/^.*[\\\/]/, "");
          const fileSize = files.item(0).size;
          const fileSizeInKB = Math.round(fileSize / 1024);
          if (fileSizeInKB >= 19) {
            return {
              fileSizeValidator: true
            };
          } else {
            return null;
          }
        }
        return null;
      };
    }

import { requiredFileType } from "../../../shared/requireFileTypeValidator";
import { fileSizeValidator } from "../../../shared/file-size.validator";

        export AComponent {
          UploadValue: boolean = false;
          fileChangeFunCalled: boolean = false;

         fileChange(files: FileList) {
            this.fileChangeFunCalled = true;
            if (this.uploadPanel == true && this.fileChangeFunCalled == true) {
              this.filesNum = { ...files };
              this.FileUpload.setValidators([
                Validators.required,
                requiredFileType(["jpg", "png", "txt"]),
                fileSizeValidator(files)
              ]);
              this.FileUpload.updateValueAndValidity();
              const fileSizeOrg = files.item(0).size;
              const fileSizeInKB = Math.round(fileSizeOrg / 1024);
              this.fileSize = fileSizeInKB;
              var extname = files.item(0).type;
              this.fileType = extname.split("/")[1].toUpperCase();
            }
          }
     handleFileInput() {
        this.uploadPanel = true;
        this.fileChangeFunCalled = false;
      }

 @HostListener("window:focus", ["$event"])
  onFocus(event: FocusEvent): void {
    if (this.uploadPanel == true && this.fileChangeFunCalled == false) {
      this.closePanel = true;
      this.addSlot
        .get("FileUpload")
        .setValidators([
          Validators.required,
          requiredFileType(["jpg", "png", "txt"])
        ]);
      this.addSlot.get("FileUpload").updateValueAndValidity();
    }
  }
        }

 <div class="form-group row" *ngIf="elemHideshow">
        <label
          for="FileUpload"
          class="label offset-sm-2 col-sm-2 col-form-label"
          >Upload Drop Mail :</label
        >
        <div class="col-sm-5">
          <input
            type="file"
            formControlName="FileUpload"
            [class.is-invalid]="FileUpload.invalid && uploadPanel"
            class="form-control"
            (change)="fileChange($event.target.files)"
            (click)="handleFileInput()"
            #inputTypeFile
          />
          <!-- {{ requiredFileType() }} -->
          <!-- <button onclick="document.getElementById('abc').click()">
            choose file
          </button> -->
          <div *ngIf="FileUpload.invalid && uploadPanel">
            <small *ngIf="FileUpload.errors?.required" class="text-danger"
              >File is required</small
            >
            <small
              *ngIf="FileUpload.errors?.requiredFileType"
              class="text-danger"
              >{{ fileType }} type is not allowed</small
            >
            <small
              *ngIf="FileUpload.errors?.fileSizeValidator"
              class="text-danger"
              >{{ fileSize }} KB size is not allowed.</small
            >
          </div>
        </div>
      </div>