reactjs形式的多个文件上传器 [英] multiple file uploader in reactjs form
问题描述
我在数据库中有一个项目列表,我想在表中呈现它,并将为每个项目添加输入type = file以便为每个项目上传文件 在句柄上单击,我想发送项目名称以处理函数,但是我不能, 为了更清楚,我想每次单击时都将value item.documentname值发送到file1MadChangedHandler函数.
I have a list of items in database and I want to render it in table and will add input type=file for each to upload file for each item on handle click i want to send item name to handle function but i couldn't, to make it clearer i want send value item.documentname to file1MadChangedHandler function, every time i click
{this.props.Organizations.listDocs
?
<div>
{ this.props.Organizations.listDocs.map(function (item, index) {
return(
<tr key={item.documentName}>
{item.documentName}
<td>
<td>
<input component="input"
type="file"
id="{item.documentName}"
onChange={(event,item)=> {
this.file1MadChangedHandler(event,item) }}
// onChange={this.file1MadChangedHandler}
ref={fileInput => ref.fileInput = fileInput}
style={{ display: "None" }}
/>
<button onClick={(item) => this.fileInput.click(item.documentName)}>Pick File</button>
</td>
</tr>
)
})
}
</div>
:
""
}
推荐答案
使用来自您的 repl.it/repls /MutedFunnyBlog 代码.
要获取上传项目的文件名,您需要对数据进行如下更改:
To get file name of uploaded item, you need to change your data slightly like below:
data: [
{ id: 1, name: "Copy of Applicant's Identification Card / Passport", "file": "" },
{ id: 2, name: "Copy of Business Registration Certificate (eg. SSM)", "file": "" },
{ id: 3, name: "Copy of Business Registration File 1", "file": "" },
{ id: 4, name: "Copy of Business Registration File 2", "file": "" }
] //added file
然后渲染每一行,如下所示:
then render each row like below:
data.map((item, index) => {
return(
<tr key={`${this.state.inputkey}${item.id}`}>
<td width="100">{item.id}</td>
<td width="300">{item.name}</td>
<td width="200">{item.file}</td> /* your third column */
<td>
<input
key={this.state.inputkey} /*unique key */
type="file"
id={item.id} /*unique id cus every row should have unique input file type*/
className="inputfile"
onInput ={(e) => this.handleChange(e,item.id)}
data-name={item.id} />
<label htmlFor ={item.id} > /* unique id for file upload*/
<figure>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
</svg>
</figure>
</label>
</td>
</tr>
);
});
并在handleChange事件中:
and in handleChange event:
handleChange(event, i) {
const newData = this.state.data.map(item => ({...item}) ); //copy state.data to new data
newData.map(item => item.file = i === item.id ? event.target.files[0].name: item.file); //set file based on uploaded file in each row
this.setState({
data: newData,
inputkey: Math.random().toString(36) //set new unique key here
}, () => console.log(this.state.data));
}
演示,希望它可以解决您的问题.
Demo , Hope It clears your issues.
这篇关于reactjs形式的多个文件上传器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!