Shulou(Shulou.com)05/31 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.