如何允许输入类型=文件在react组件中选择相同的文件

IT技术 javascript reactjs
2021-05-17 00:39:45

我有一个react组件，它呈现一个<input type="file">dom 以允许用户从浏览器中选择图像。我发现当我选择同一个文件时，它的 onChange 方法没有被调用。经过一番搜索，有人建议使用this.value=null或return false在 onChange 方法的末尾，但我尝试过它不起作用。

下面是我的代码：

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { this.readFile(event) }}/>

以下是我尝试过的：

<input id="upload" ref="upload" type="file" accept="image/*"
               onChange={(event)=> { 
                   this.readFile(event) 
                   return false
              }}/>

另一种是：

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
               this.value=null
          }}/>

我相信上述解决方案适用于 jquery，但我不知道如何让它在 reactjs 中工作。

4个回答

这个线程的重复

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
          }}
        onClick={(event)=> { 
               event.target.value = null
          }}

/>

我认为this在你的函数中没有提到input字段。尝试使用event.target。

<input id="upload" ref="upload" type="file" accept="image/*"
           onChange={(event)=> { 
               this.readFile(event) 
               event.target.value=null
          }}/>

对我来说确实有效：事件。currentTarget .value = null

    onClick={(event)=> { 
               event.currentTarget.value = null
          }}

我的react版本：16.2.0

@jbsmoove解决方案适用于除 IE11 之外的所有浏览器。

对于 IE11，如果我们打开某个文件并在第二次按下打开文件的取消键，它会显示空屏幕，在控制台中我们看到：

无法获取未定义或空引用的属性“名称”

所以我想出了另一个即使在 IE11 中也能完美运行的解决方案：

<input id="upload" ref="upload" type="file" accept="image/*"
      onInput={(event)=> { 
           this.readFile(event) 
      }}
      onClick={(event)=> { 
           event.target.value = null
      }}
/>

只需使用onInput而不是onChange。

其它你可能感兴趣的问题
上一篇在 Cura 中，我可以让我的顶层和底层都成为边界吗？ 下一篇床位平整方法？