Detailed explanation of JavaScript upload file limit parameter case

Detailed explanation of JavaScript upload file limit parameter case

Project scenario:

1. Upload file restrictions

Function:

1. Prevent front-end operations from uploading abnormal files
2. Limit the rules that meet the requirements and optimize the display model

Functionality:

1. Get the file instance
2. Execute verification rule method

The code is as follows:

//Size limit checkFileSize(file, rules) {
    return new Promise((resolve, reject) => {
        file.size / 1024 / 1024 > rules ? reject() : resolve()
    }).then(
        () => {
          return true
        },
        () => {
			//Operation prompt return Promise.reject()
        }
    )
},
//Upload format restrictions checkFileType(file, rules) {
    return new Promise((resolve, reject) => {
        rules && rules.includes(file.type) ? resolve() : reject()
    }).then(
      () => {
          return true
      },
      () => {
          //Operation prompt return Promise.reject()
      }
    )
},
//Aspect ratio (image)
checkImageWH(file, rules) {
    const _this = this
    return new Promise((resolve, reject) => {
    	//Read file const filereader = new FileReader()
        filereader.readAsDataURL(file)
        filereader.onload = e => {
          const src = e.target.result
          const image = new Image()
          image.onload = function() {
			//Analyze the data and determine whether it complies with the rules resolve()
		}
          image.onerror = reject
          image.src = src
        }
    }).then(
        () => {
          return true
        },
        () => {
          //Operation prompt return Promise.reject()
        }
    )
},
//Aspect ratio (video)
checkVideoWH(file, rules) {
      return new Promise(function(resolve, reject) {
        var url = URL.createObjectURL(file)
        var video = document.createElement('video')
        video.onloadedmetadata = evt => {
          URL.revokeObjectURL(url)
          //Analyze the data and determine whether it complies with the rules resolve()
        }
        video.src = url
        video.load() // fetches metadata
      }).then(
        () => {
          return true
        },
        () => {
          //Operation prompt return Promise.reject()
        }
      )
}

Actual call

//Get the file instance Screen(){
	//Get permission rules const { filesSize, filesFormat, fileLimit} = this // File size, file type, image/video width and height limits //Parameter judgment const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true
    const isFileType = filesFormat ? await this.checkFileType(file, filesFormat) : true
	//Picture materialif (fileLimit && fileLimit.type * 1 === 1) {
      const isImageLimit = fileLimit? await this.checkImageWH(file, fileLimit) : true
      //output result return isFileSize && isFileType && isImageLimit
    } else if (fileLimit&& fileLimit.type * 1 === 2) {
    //Video material const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true
      //output result return isFileSize && isFileType && isVideoLimit
    } else {
    //No limit //Output result return isFileSize && isFileType
    }
}

Summary:

1. Get an instance
2. Execution method.

This is the end of this article about the detailed case of JavaScript upload file restriction parameter. For more relevant js upload file restriction parameter content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Common array operations in JavaScript
  • A simple and in-depth study of async and await in JavaScript
  • JavaScript implementation of classic snake game
  • Javascript basics about built-in objects
  • Detailed explanation of JavaScript operation mechanism and a brief discussion on Event Loop
  • Comparison between Python coroutines and JavaScript coroutines
  • JavaScript to achieve mouse tailing effect
  • JavaScript to achieve simple drag effect
  • Detailed explanation of JavaScript array deduplication
  • JavaScript to implement the aircraft war game
  • JavaScript setinterval delay one second solution
  • A brief talk about JavaScript variable promotion
  • In-depth understanding of JavaScript event execution mechanism
  • 8 essential JavaScript code snippets for your project

<<:  The MySQL server is running with the --read-only option so it cannot execute this statement

>>:  How to Install Xrdp Server (Remote Desktop) on Ubuntu 20.04

Recommend

Web Design: Script Materials Reconstruct User Experience

<br />Original text: http://blog.rexsong.com...

32 Typical Column/Grid-Based Websites

If you’re looking for inspiration for columnar web...

Detailed process of drawing three-dimensional arrow lines using three.js

Demand: This demand is an urgent need! In a subwa...

How to implement vue page jump

1. this.$router.push() 1. Vue <template> &l...

New ways to play with CSS fonts: implementation of colored fonts

What if you designers want to use the font below ...

Detailed description of mysql replace into usage

The replace statement is generally similar to ins...

Class in front-end JavaScript

Table of contents 1. Class 1.1 constructor() 1.2 ...

Complete steps to quickly build a vue3.0 project

Table of contents 1. We must ensure that the vue/...

DHTML objects (common properties of various HTML objects)

!DOCTYPE Specifies the Document Type Definition (...

Detailed explanation of docker entrypoint file

When writing a Dockerfile, include an entrypoint ...

Detailed explanation on how to deploy H5 games to nginx server

On the road to self-learning game development, th...

Solution to mysql failure to start due to insufficient disk space in ubuntu

Preface Recently, I added two fields to a table i...

Docker+nextcloud to build a personal cloud storage system

1. Docker installation and startup yum install ep...