Javascript读取上传文件内容/类型/字节数
程序员文章站
2023-08-29 23:45:32
在网站开发的某些情况下我们需要上传文件到服务器,在这个过程中可能会对文件做一定的限制,比如说文件格式,文件大小等,在一些情况下我们上传文件其实是为了获取其中的内容在前端区域...
在网站开发的某些情况下我们需要上传文件到服务器,在这个过程中可能会对文件做一定的限制,比如说文件格式,文件大小等,在一些情况下我们上传文件其实是为了获取其中的内容在前端区域展示,这个时候就不需要将文件上传到服务器,完全可以通过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, }) } }) } }
如果看了上边的代码示例还搞不定欢迎留言提问!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 微信小程序-form表单提交代码实例
下一篇: 路遇一天仙
推荐阅读
-
Javascript读取上传文件内容/类型/字节数
-
【文件上传绕过】十三—十五、文件头内容校验文件类型绕过
-
Javascript读取上传文件内容/类型/字节数
-
javascript验证上传文件的类型限制必须为某些格式_javascript技巧
-
客户端js判断文件类型和文件大小即限制上传大小_javascript技巧
-
js判断上传文件的类型和大小示例代码_javascript技巧
-
js判断上传文件类型判断FileUpload文件类型代码_javascript技巧
-
javascript - php读取json文件并查找其中的内容
-
通过Javascript读取本地Excel文件内容的代码示例_javascript技巧
-
js判断上传文件的类型和大小示例代码_javascript技巧