Javascript读取上传文件内容/类型/字节数

本文介绍了如何在前端使用JavaScript读取上传文件的内容、类型和字节数,以实现在不上传到服务器的情况下在前端展示文件内容,从而提高效率并减轻服务器负载。通过React和Material-UI实现UI设计,并展示了文件读取的操作绑定。
摘要由CSDN通过智能技术生成

在网站开发的某些情况下我们需要上传文件到服务器,在这个过程中可能会对文件做一定的限制,比如说文件格式,文件大小等,在一些情况下我们上传文件其实是为了获取其中的内容在前端区域展示,这个时候就不需要将文件上传到服务器,完全可以通过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}
	  
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值