如何允许 input type = file 在 response 组件中选择相同的文件

我有一个反应组件，它呈现一个 <input type="file">域，允许用户从浏览器选择图像。我发现当我选择相同的文件时，它的 onChange 方法没有被调用。在一些搜索之后，有人建议在 onChange 方法的末尾使用 this.value=null或 return false，但是我已经试过了，但是没有用。

下面是我的代码:

<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 中工作。

108658 次浏览
小开

我认为你的函数中的 this没有引用 input字段。试着用 event.target代替。

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

失去 这根线

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


/>
小开

我的反应版本: 16.2.0

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

至于 IE11，如果我们打开一些文件，在第二次我们按下取消而不是打开文件，它显示空屏幕，在控制台我们看到:

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

因此，我想出了另一个即使在 IE11中也能完美运行的解决方案:

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

只要使用 OnInput而不是 改变。

小开

使用回退-Click 方法选择相同的图像。 例如:

  <input
id="upload"
ref="upload"
type="file"
accept="image/*"
multiple="false"
onChange={(e) => this.getDailyImage(e)}
onClick={(e) => e.target.files[0] && this.getDailyImage(e)}
/>
小开

对我来说，实际上是这样的: event.当前目标.value = null

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

下面是我的解决方案

import * as React from "react";


export class FileSelector extends React.Component<undefined, undefined>
{
constructor(props: any)
{
super(props);
this.handleChange = this.handleChange.bind(this);
}


handleChange(selectorFiles: FileList)
{
console.log(selectorFiles);
}


render ()
{
return <div>
<input type="file" onChange={ (e) => this.handleChange(e.target.files) } />
</div>;
}
}
小开

我通常只是在输入上使用 key道具来在选择之间重置它的底层 DOM 节点(要么在更改处理程序中使用一些增量 UID 计数器，要么上传/处理状态标志) :

const UploadInput = (props) => {
const [isUploading, setUploading] = useState(false);


const handleChange = useCallback((async (e) => {
setUploading(true); // or setUID((old) => old + 1);


try {
await ... // handle processing here
} finally {
setUploading(false);
}
}, [...]);


return (
<div className={...}>
<input key={isUploading} type="file" onChange={handleChange} {...props} />


{isUploading && <Spinner />}
</div>
);
};

另一种方法可能是获取表单的 ref，并在处理后使用 formRef.reset()(如果在文件处理后不关心表单内容，则可行)。

小开

通过在我的 input中使用 打印稿添加以下 onchange事件监听器，我使我的监听器工作起来。

const onInputFileChange = (
event: ChangeEvent<HTMLInputElement>
): void => {
const nativeEvent = event.nativeEvent.target as HTMLInputElement;
const targetEvent = event.target as HTMLInputElement;
if (targetEvent.files && targetEvent.files[0]) {
const imageFile = targetEvent.files[0];
// eslint-disable-next-line no-param-reassign
nativeEvent.value = "";
}
};
小开

如果您正在使用 多个文件上传尝试 Value

  <input id='uploadFile' type="file" onClick={(e)=> {e.currentTarget.value = null}}  onChange={onChangeGetFilesSelected}  multiple={true} accept=".xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf"/>
小开

经过几个小时的在线研究，这个方法在 Reactjs 上为 ME 工作

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


/>

提交答案