How does Javascript read the content / type / bytes of the uploaded file

This article mainly explains "how to read the content / type / bytes of uploaded files by Javascript". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to read the content / type / bytes of uploaded files by Javascript.

First, let's take a look at the attributes of an uploaded file object:

UI Design (React+Material-ui)

.. const styles = theme = > ({formControl: {margin: theme.spacing.unit, minWidth: 120, width: '100% cake,}, leftIcon: {marginRight: theme.spacing.unit,}}).. {this.state.sqlStrErr} OR UPLOAD SQL FILE...

The effect picture is as follows:

Operation binding, including front-end file content reading and file upload, respectively

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) {/ / calculate the file size and convert it to M in sqlStrErr = 'File size exceeds the limitation (2m)!'} this.setState ({Err: [... this.state.Err, 'sqlStr'], sqlStrErr: sqlStrErr})}}

The above example is only a simple reading of the contents of the front-end file, and does not involve uploading the file to the server. Here is:

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 dagger / this value is used to show the upload progress To let the user know the current upload status. })},}) .then (res = > {if (res.data.code =-1) {this.setState ({sqlStrErr: res.data.info})} else {this.setState ({loaded: 100,})} so far, I believe you have a better understanding of "how Javascript reads the content / type / bytes of uploaded files", so you might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!