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

 更新时间:2019年04月30日 08:59:21   作者:Lockeyi  
这篇文章主要为大家详细介绍了Javascript读取上传文件内容/类型/字节数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在网站开发的某些情况下我们需要上传文件到服务器,在这个过程中可能会对文件做一定的限制,比如说文件格式,文件大小等,在一些情况下我们上传文件其实是为了获取其中的内容在前端区域展示,这个时候就不需要将文件上传到服务器,完全可以通过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,
   })
   }
  })
 }
 }

如果看了上边的代码示例还搞不定欢迎留言提问!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • jquery 滚动条事件简单实例

    jquery 滚动条事件简单实例

    这篇文章介绍了jquery滚动条事件的简单实例,有需要的朋友可以参考一下
    2013-07-07
  • JS的鼠标监听mouseup鼠标抬起失效原因及解决

    JS的鼠标监听mouseup鼠标抬起失效原因及解决

    这篇文章主要为大家介绍了JS的鼠标监听mouseup鼠标抬起失效原因及解决示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 利用svg实现带加载进度的loading

    利用svg实现带加载进度的loading

    svg是基于XML,由World Wide Web Consortium (W3C)联盟开发的一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。本文将使用svg实现一个带加载进度的loading,需要的可以参考一下
    2022-11-11
  • JavaScript Base64编码和解码,实现URL参数传递。

    JavaScript Base64编码和解码,实现URL参数传递。

    JavaScript Base64编码和解码,实现URL参数传递。...
    2006-09-09
  • 微信小程序button组件使用详解

    微信小程序button组件使用详解

    这篇文章主要为大家详细介绍了微信小程序button组件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • TypeScript 中接口详解

    TypeScript 中接口详解

    TypeScript核心设计原则之一就是类型检查,通过使用接口(Interfaces)可以进行类型检查,满足传统面向对象思想,利于有效开发,有效避免类型转换问题。
    2015-06-06
  • 使用JavaScript渲染页面的方法详解

    使用JavaScript渲染页面的方法详解

    本文主要介绍了使用JavaScript渲染页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴下面随着小编来一起来学习吧
    2023-12-12
  • javascript parseInt与Number函数的区别

    javascript parseInt与Number函数的区别

    在js中,如果你使用parseInt("08"),一般都会认为会返回8,然而实际上返回了0.但是用Number("08")返回的才是8.
    2010-01-01
  • 微信小程序实现发动态功能的示例代码

    微信小程序实现发动态功能的示例代码

    最近做了一个校园拍卖小程序,想在里面添加一个类似校园圈功能,现在来一步一步实现,对微信小程序实现发动态功能感兴趣的朋友一起看看吧
    2022-08-08
  • JavaScript运动原理基础知识详解

    JavaScript运动原理基础知识详解

    这篇文章主要介绍了JavaScript运动原理基础知识详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04

最新评论