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


Posted in Javascript onApril 30, 2019

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

效果图如下:

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

操作绑定,分别包含前端文件内容读取和文件上传

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 相关文章推荐
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
jQuery手风琴的简单制作
May 12 jQuery
JScript实现地址选择功能
Aug 15 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 #Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 #Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 #Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 #Javascript
详解JS实现系统登录页的登录和验证
Apr 29 #Javascript
实例详解vue中的$root和$parent
Apr 29 #Javascript
微信网页登录逻辑与实现方法
Apr 29 #Javascript
You might like
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
PHP安全下载文件的方法
2016/04/07 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python计算两个地址之间的距离方法
2018/06/09 Python
对Python中内置异常层次结构详解
2018/10/18 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python Shapely使用指南详解
2020/02/18 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
写给女生的道歉信
2014/01/14 职场文书
趣味活动策划方案
2014/02/08 职场文书
晚归检讨书
2014/02/19 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
《植树问题》教学反思
2016/03/03 职场文书
五年级语文教学反思
2016/03/03 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript