Question

我有这段代码，可以选择多个文件，然后将这些文件上传到服务器。我使用输入类型=“文件”，然后我将选择的文件添加到文件列表中（例如，我可以单击按钮，选择文件“ A”，然后再次单击相同的按钮并选择文件“ B”，我的计数器是2）。还有一个按钮，用于从选择中删除所有文件（如果您选择文件时确实出错），然后当我尝试重新选择相同文件时，我的计数器仍设置为0。如果我选择了不同文件，则不会出现此问题，然后删除它，然后选择我想要的文件。为了简化起见，假设您有文件：

FileA.jpg，FileB.jpg，FileC.png

当我选择FileA计数器为1时，然后单击“删除”，计数器又回到0。

然后，我想重新选择相同的FileA，但是它不计入所选文件的数量，并且只要我选择以前执行的相同文件，计数器仍设置为0。

我的状态如下：

this.state={
          selectedFile:null,
          ile:0,
          lista:"",
       }

这是我的文件处理：

async handleRemove(){
    await this.setState({
      selectedFile:null,
      ile:0,
      lista:"",
      })
  data= new FormData();
  }

async handleSubmitFile(e) {
          await this.setState({selectedFile:e.target.files,})
          for(var x=0;x<this.state.selectedFile.length;x++){
                let rozszerzenie=this.state.selectedFile[x].name.split(".").pop();
                if(rozszerzenie.toUpperCase()==='PNG' || rozszerzenie.toUpperCase()==='JPEG' || rozszerzenie.toUpperCase()==='PDF' || rozszerzenie.toUpperCase()==='JPG')
                    {
                      data.append('images[]',this.state.selectedFile[x]);
                      if (this.state.lista.includes(this.state.selectedFile[x].name)){
                      }
                  else{await this.setState({
                      ile:this.state.ile+1,
                      lista:this.state.lista+this.state.selectedFile[x].name+"\n",
                  })
                  ;}
                }
                else{
                      alert("Błędny format pliku, proszę przesyłać tylko PNG, PDF oraz JPG/JPEG");
                      return;
                }  
              }
  }

我的退货变得很简单

<input type='file' onChange={this.handleSubmitFile} multiple name='file' id='image' accept='application/pdf, image/*'/>
{this.state.ile}- number of files selected
{this.state.lista}-list of all files
<button type="button" className="fileupdate" onClick={this.handleRemove}>Remove files</button>

我觉得它会以某种方式记住最后的选择，并且不允许重新选择它。有什么想法可以绕开它吗？

Answer 1

<input type='file' onChange={this.handleSubmitFile} multiple name='file' id='image' accept='application/pdf, image/*'/ value={this.state.selectedFile}>

您需要在输入中添加value属性，因此当您清除selectedFile时，您的输入也应设置为null，因为onChange与更改一起使用，因此如果文件未更改，则不会更改触发。

从选择中删除文件后，上传文件并不允许我选择相同的文件

1 个答案: