在网站开发的某些情况下我们需要上传文件到服务器,在这个过程中可能会对文件做一定的限制,比如说文件格式,文件大小等,在一些情况下我们上传文件其实是为了获取其中的内容在前端区域展示,这个时候就不需要将文件上传到服务器,完全可以通过Javascript来获取上传文件内容然后进行展示,既加快了操作速度,也减轻了服务器的负载和存储。接下来就是一个实际操作的过程:
首先来看一下一个上传文件对象的属性:
UI设计(React+Material-ui)
...
const styles = theme => ({
formControl: {
margin: theme.spacing.unit,
minWidth: 120,
width: '100%',
},
leftIcon: {
marginRight: theme.spacing.unit,
}
})
...
<Grid item xs>
<FormControl
className={classes.formControl}
error={this.state.Err.includes('sqlStr')}
>
<TextField
label="SQL"
onChange={this.onTextChange('sqlStr')}
value={this.state.sqlStr}