您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Javascript如何讀取上傳文件內(nèi)容/類型/字節(jié)數(shù),小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在網(wǎng)站開發(fā)的某些情況下我們需要上傳文件到服務(wù)器,在這個(gè)過程中可能會(huì)對(duì)文件做一定的限制,比如說文件格式,文件大小等,在一些情況下我們上傳文件其實(shí)是為了獲取其中的內(nèi)容在前端區(qū)域展示,這個(gè)時(shí)候就不需要將文件上傳到服務(wù)器,完全可以通過Javascript來獲取上傳文件內(nèi)容然后進(jìn)行展示,既加快了操作速度,也減輕了服務(wù)器的負(fù)載和存儲(chǔ)。接下來就是一個(gè)實(shí)際操作的過程:
首先來看一下一個(gè)上傳文件對(duì)象的屬性:
UI設(shè)計(jì)(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) {//計(jì)算文件大小并且換算成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, }) } }) } }
關(guān)于“Javascript如何讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。