日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

這篇文章將為大家詳細(xì)講解有關(guān)Javascript如何讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開發(fā)，軟件開發(fā)，小程序制作，10多年建站對(duì)成都效果圖設(shè)計(jì)等多個(gè)領(lǐng)域，擁有多年建站經(jīng)驗(yàn)。

在網(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,
 }
 })
...
 
 
  
  {this.state.sqlStrErr}
  
  
  
  OR UPLOAD SQL FILE
  
  
 
 
 ...

效果圖如下：

操作綁定，分別包含前端文件內(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)把它分享出去讓更多的人看到。

分享題目：Javascript如何讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/dgijdj.html