表单重置type=“file“的input、form.reset用法

一、场景

1. 利用原始html input-type=“file” 写了一个上传文件的组件、但是每次上传之后，
2. 再次选择文件就不会触发 onchange 事件, 上传导致页面报错

// trigger select file
getFilds = () =>{
  const filedom = document.getElementById('file');
  filedom.click()
}
// This function is used to listen for events uploaded by the button
fileinputChange = (event) =>{
  const fileData = event.target.files[0];
  if(fileData) this.send(fileData);
}

send = (fileData) =>{
	fetch(...).then(res=>{
		// promit infomation to users
		... 
	})
}
... render
<div>
	<input 
	  type="file" id="file" accept=".xls,.xlsx"
	  style={{ display:"none", }} onChange={this.fileinputChange}
	/>
	<Button type="primary" onClick={this.getFilds}>上传excel</Button>
</div>

二、解决办法

使用 html-form-reset() 方法重置 type=“file” 的值。
form-reset MDN 使用方法传送门 https://developer.mozilla.org/
修改html code如下

// trigger select file
getFilds = () =>{...}
// This function is used to listen for events uploaded by the button
fileinputChange = (event) =>{...}

send = (fileData) =>{
	fetch(...).then(res=>{
		// promit infomation to users
		... 
		// 在这里加入表单重置
		const filedom = document.getElementById('Formreset');
		filedom.reset()
	})
}



<form id="Formreset">
	<input 
	  type="file" id="file" accept=".xls,.xlsx"
	  style={{ display:"none", }} onChange={this.fileinputChange}
	/>
	<Button type="primary" onClick={this.getFilds}>上传excel</Button>
</form>

三、注意事项

form.reset() 方法会表单项表单内所有表单项
运行该方法和点击表单的重置按钮是一样的效果.

因为案例这里我只有一个input表单项用于获取文件，所以使用这个方法最合适。

标签：reset,...,fileinputChange,form,file,fileData,上传
来源： https://blog.csdn.net/qq_45301392/article/details/118103626