Javascript读取上传文件内容/类型/字节数
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript读取上传文件内容/类型/字节数，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2946字，纯文字阅读大概需要5分钟。
内容图文
在网站开发的某些情况下我们需要上传文件到服务器，在这个过程中可能会对文件做一定的限制，比如说文件格式，文件大小等，在一些情况下我们上传文件其实是为了获取其中的内容在前端区域展示，这个时候就不需要将文件上传到服务器，完全可以通过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}
placeholder="Add Select SQL here..."
multiline
InputLabelProps={{
shrink: true,
}}
fullWidth
rows={6}
variant="outlined"
/>
<FormHelperText>{this.state.sqlStrErr}</FormHelperText>
<input
style={{display: 'none'}}
name="uploadSqlFile"
id="uploadSqlFile"
onChange={this.handleUploadSqlFile}
type="file"
/>
<label htmlFor="uploadSqlFile" style={{position: 'absolute', right: '0px',bottom: '20px', background:'#f5f0ff'}}>
<Button color="primary" variant="outlined" component="span">
<CloudUploadOutlined className={classes.leftIcon} />OR UPLOAD SQL FILE
</Button>
</label>
</FormControl>
</Grid>
...
效果图如下：
操作绑定，分别包含前端文件内容读取和文件上传
handleUploadSqlFile = event => {
let that = this
const selectedFile = event.target.files[0]
if(selectedFile.type.includes('text') || selectedFile.type === ''){
let reader = new FileReader();// !important
reader.readAsText(selectedFile, "UTF-8");// !important
reader.onload = function(evt){// !important
let sqlStr = evt.target.result;// !important
that.setState({
Err: that.state.Err.filter(c => c !== 'sqlStr'),
sqlStr: sqlStr,
sqlStrErr: '*Avoid duplicated column fields',
})
}
}else {
let sqlStrErr = 'File format is not supported!'
if ((selectedFile.size / 1024 / 1024).toFixed(4) >= 2) {//计算文件大小并且换算成M为单位
sqlStrErr = 'File size exceeds the limitation (2M)!'
}
this.setState({
Err: [...this.state.Err, 'sqlStr'],
sqlStrErr: sqlStrErr
})
}
}
上边的示例只是单纯的前端文件内容读取，并未涉及文件上传到服务器，接下来是：
import axios from 'axios'
...
handleUploadSqlFile = event => {
const selectedFile = event.target.files[0]
if ((selectedFile.size / 1024 / 1024).toFixed(4) >= 10) {
this.setState({ sqlStrErr: 'File size exceeds the limitation (10M)!' })
} else {
const data = new FormData()
data.append('file', selectedFile, selectedFile.name)
axios
.post('/api/utils/upload_file', data, {
onUploadProgress: ProgressEvent => {
this.setState({
loaded: (ProgressEvent.loaded / ProgressEvent.total) * 100 - Math.random() * 16,//此值用来展示上传进度，好让用户知道目前的上传状态。
})
},
})
.then(res => {
if (res.data.code === -1) {
this.setState({ sqlStrErr: res.data.info })
} else {
this.setState({
loaded: 100,
})
}
})
}
}
如果看了上边的代码示例还搞不定欢迎留言提问！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的Javascript读取上传文件内容/类型/字节数全部内容，希望文章能够帮你解决Javascript读取上传文件内容/类型/字节数所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。