JavaScript 上傳文件限制參數(shù)案例詳解
更新時間:2021年09月13日 14:30:45 作者:箴水_Protaos
這篇文章主要介紹了JavaScript 上傳文件限制參數(shù)案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
項目場景:
1,上傳文件限制
功能作用:
1,防止前端操作上傳異常文件
2,限制符合的規(guī)則,優(yōu)化展示模型
功能實現(xiàn):
1,獲取file實例
2,執(zhí)行校驗規(guī)則方法
代碼如下:
//大小限制
checkFileSize(file, rules) {
return new Promise((resolve, reject) => {
file.size / 1024 / 1024 > rules ? reject() : resolve()
}).then(
() => {
return true
},
() => {
//操作提示
return Promise.reject()
}
)
},
//上傳格式限制
checkFileType(file, rules) {
return new Promise((resolve, reject) => {
rules && rules.includes(file.type) ? resolve() : reject()
}).then(
() => {
return true
},
() => {
//操作提示
return Promise.reject()
}
)
},
//寬高比例(圖片)
checkImageWH(file, rules) {
const _this = this
return new Promise((resolve, reject) => {
//讀取文件
const filereader = new FileReader()
filereader.readAsDataURL(file)
filereader.onload = e => {
const src = e.target.result
const image = new Image()
image.onload = function() {
//分析數(shù)據(jù),對數(shù)據(jù)進行判斷 符合規(guī)則 resolve()
}
image.onerror = reject
image.src = src
}
}).then(
() => {
return true
},
() => {
//操作提示
return Promise.reject()
}
)
},
//寬高比例(視頻)
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)
//分析數(shù)據(jù),對數(shù)據(jù)進行判斷 符合規(guī)則 resolve()
}
video.src = url
video.load() // fetches metadata
}).then(
() => {
return true
},
() => {
//操作提示
return Promise.reject()
}
)
}
實際調(diào)用
//獲取file實例
Screen(){
//獲取權限規(guī)則
const { filesSize, filesFormat, fileLimit} = this // 文件大小、文件類型、圖片/視頻寬高限制
//傳參判斷
const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true
const isFileType = filesFormat ? await this.checkFileType(file, filesFormat) : true
//圖片素材
if (fileLimit && fileLimit.type * 1 === 1) {
const isImageLimit = fileLimit? await this.checkImageWH(file, fileLimit) : true
//輸出結(jié)果
return isFileSize && isFileType && isImageLimit
} else if (fileLimit&& fileLimit.type * 1 === 2) {
//視頻素材
const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true
//輸出結(jié)果
return isFileSize && isFileType && isVideoLimit
} else {
//不限制
//輸出結(jié)果
return isFileSize && isFileType
}
}
內(nèi)容總結(jié):
1,獲取實例
2,執(zhí)行方法。
到此這篇關于JavaScript 上傳文件限制參數(shù)案例詳解的文章就介紹到這了,更多相關js 上傳文件限制參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
nuxt+axios實現(xiàn)打包后動態(tài)修改請求地址的方法
這篇文章主要介紹了nuxt+axios實現(xiàn)打包后動態(tài)修改請求地址的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
用Javascript評估用戶輸入密碼的強度(Knockout版)
早上看到博友6點多發(fā)的一篇關于密碼強度的文章(連接),甚是感動(周末大早上還來發(fā)文)2011-11-11
微信小程序開發(fā)之實現(xiàn)食堂點餐系統(tǒng)
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的食堂點餐系統(tǒng),文中的示例代碼講解詳細,感興趣的小伙伴可以和小編一起學習一下2023-01-01
webpack 開發(fā)和生產(chǎn)并行設置的方法
這篇文章主要介紹了webpack 開發(fā)和生產(chǎn)并行設置的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11

