清空input file中的值

清空input file中的值

对于input type为file元素：

未选择文件之前，它是这个样子：

当选择文件名为index.html的文件后，它变成了这个样子，input元素会显示文件名信息：

  有时候在选择上传文件时，需要前端对选择的文件格式进行一个判断，当满足条件时，才在input元素中显示其文件名信息，当不满足时则保持原来样子即显示“未选择任何文件”。由于input type为file元素默认只要选择了文件都会显示其文件名信息，所以想实现上述效果就需要在判断时对不符合条件的进行一个input file值的清空。方法如下，亲测有效：

1、value设置为空

对于input type为file元素，不能为value属性设置除空以外的值，否则会报错，如下图：

但是可以利用设置value为空来清空input file中的值。inputEle为input type为file的元素DOM。

inputEle.value = '';

因此，对于不满条件的可以通过设置value为空，让input元素不显示其文件名信息。

参考文献

[1] js清空input file的值
[2] 将input file的选择的文件清空的两种解决方案