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中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
python代码编写计算器小程序
2020/03/30 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python剪切视频与合并视频的实现
2020/03/03 Python
浅谈Python中的模块
2020/06/10 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
安全生产实施方案
2014/02/23 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
长江三峡导游词
2015/01/31 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL