Question

我有3个可替换的单独输入文件。我给了输入字段名称以标识输入字段，然后调用验证方法，以确保输入字段不包含重复文件，并且所有三个文件上载字段都应为图像或pdf，但都是。

虽然此代码首次按预期运行，但是如果我尝试用新文件替换现有文件，则此代码将无法正常工作。它将停止接受其他输入。

   <ng-container>
            <span>
<label class="label1 " >
    <div >
    <span><img class="image1 " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsS20QLprBvJJNK0msxZmdu6hwqOmSiz1Mp58QLD4W0JKCSXuT" alt="img " width="30 " height="30 " /></span>
            <span style="cursor:pointer;">{{salary1}}</span>
            <span><input type="file" (change)="selectFile($event)" name="salary1" accept=".jpg, .jpeg, .png, .pdf "></span>
            </div>
            </label>
            </span>
             <br>
              <br>
            <span>

        <label class="label1">
        <img class="image2 " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsS20QLprBvJJNK0msxZmdu6hwqOmSiz1Mp58QLD4W0JKCSXuT " alt="img " width="30 " height="30 " />

            <span style="cursor:pointer;">{{salary2}}</span>
            <input type="file" (change)="selectFile($event)" name="salary2"  accept=".jpg, .jpeg, .png, .pdf ">
            </label>
            </span>
             <br>
              <br>
            <span>
<label class="label1 ">
        <img class="image3 " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsS20QLprBvJJNK0msxZmdu6hwqOmSiz1Mp58QLD4W0JKCSXuT " alt="img " width="30 " height="30 " />

            <span style="cursor:pointer;">{{salary3}}</span>
            <input type="file" (change)="selectFile($event)" name="salary3"  accept=".jpg, .jpeg, .png, .pdf ">
            </label>
            </span>
             <br>
              <br>
            <br>
            <span>
<button >Save</button>
</span>

        </ng-container>

// ts

  salary1 = "Month 1 / Combined";
     salary2 = "Month 2";
     salary3 = "Month 3";
     salary2Disable = true;
     salary3Disable = true;
     storedFiles = [];

     selectFile(event) {
         console.log(event.target.files)
         console.log(event.target.name)
         let files = [].slice.call(event.target.files);
         files.forEach((file) => {
             let found = false;
             for (let i = 0; i < this.storedFiles.length; i++) {
                 if (file.name == this.storedFiles[i].name) {
                     found = true;
                     break;
                 }
             }
             if (!found) {
                 this.storedFiles.push(file);
                 this.salaryValidation();

             }
         });
         if (event.target.name == 'salary1') {
             console.log(this.storedFiles)
             this.salary1 = this.storedFiles[0].name;
             if (this.salary1) {
                 console.log(this.salary1);
                 this.salary2Disable = false;
             }

         } else {
             console.log('nothing bro');
         }

         if (event.target.name == 'salary2') {
             this.salary2 = this.storedFiles[1].name;
             if (this.salary2) {
                 this.salary3Disable = false;
             }

         } else {
             console.log('nothing bro');
         }

         if (event.target.name == 'salary3') {
             this.salary3 = this.storedFiles[2].name;

         } else {
             console.log('nothing bro');
         }
     }

     salaryValidation() {
         const images = /(\.jpg|\.png|\.jpeg)$/i;
         for (let i = 0; i < this.storedFiles.length; i++) {
             if (this.storedFiles.every(file => /\.pdf$/i.test(file.name))) {
                 console.log("all are pdf bro ");

             } else if (this.storedFiles.every(file => images.test(file.name))) {
                 console.log("all are images bro");

             } else {
                 this.storedFiles.splice(
                     this.storedFiles.indexOf(this.storedFiles[i].name),
                     1
                 );
                 alert('You can either upload images or pdf but not both');
                 return false;
             }

         }
     }

editor link

Answer 1

我不是Java语言专家，但是this article让我认为您应该使用files而不是let来定义const变量。

编辑

const实际上意味着，一旦分配了变量，就无法再次分配它，尝试这样做将引发错误。

let变量位于括号{}中，因此一旦离开selectFile()，变量将超出范围。

Answer 2

您可以尝试使用以下方法进行文件类型验证：

Basic example

TS：

 selectFile(event) {
    this.fileData = event.target.files[0]
    if (this.fileData.type == 'image/jpeg' || this.fileData.type == 'application/pdf') {
    } else {
      alert("file type should be image of pdf")
    }

  }

图像或pdf的文件输入验证

2 个答案: