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

How to use nginx as a proxy cache

The purpose of using cache is to reduce the press...

Improvement experience and sharing of 163 mailbox login box interactive design

I saw in the LOFTER competition that it was mentio...

HTML embed tag usage and attributes detailed explanation

1. Basic grammar Copy code The code is as follows...

Vue implements top left and right sliding navigation

Navigation and other things are often used in dai...

Detailed tutorial on building Gitlab server on CentOS8.1

There is no need to say much about the difference...

HTML table only displays the outer border of the table

I would like to ask a question. In Dreamweaver, I...

Detailed explanation of how to use the vue3 Teleport instant movement function

The use of vue3 Teleport instant movement functio...

Importance of background color declaration when writing styles

As the title says, otherwise when the page is revi...

How to automatically deploy Linux system using PXE

Table of contents Background Configuring DHCP Edi...

Linux /etc/network/interfaces configuration interface method

The /etc/network/interfaces file in Linux is used...

Page Refactoring Skills - Content

Enough of small talk <br />Based on the lar...

Detailed tutorial on installing Nginx 1.16.0 under Linux

Because I have been tinkering with Linux recently...

What is the function of !-- -- in HTML page style?

Mainly for low version browsers <!-- --> is ...