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浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
理解javascript中的with关键字
Feb 15 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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执行速率优化技巧小结
2008/03/15 PHP
php 操作符与控制结构
2012/03/07 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
django模板语法学习之include示例详解
2017/12/17 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python gdal安装与简单使用
2019/08/01 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
database面试题
2013/03/28 面试题
大学毕业感言200字
2014/03/09 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书