您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Javascript怎么讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Javascript怎么讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)”吧!
首先來看一下一個上傳文件對象的屬性:
UI設(shè)計(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> ...
效果圖如下:
操作綁定,分別包含前端文件內(nèi)容讀取和文件上傳
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 }) } }
上邊的示例只是單純的前端文件內(nèi)容讀取,并未涉及文件上傳到服務(wù)器,接下來是:
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,//此值用來展示上傳進(jìn)度,好讓用戶知道目前的上傳狀態(tài)。 }) }, }) .then(res => { if (res.data.code === -1) { this.setState({ sqlStrErr: res.data.info }) } else { this.setState({ loaded: 100, }) } }) } }
到此,相信大家對“Javascript怎么讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。