脚本宝典收集整理的这篇文章主要介绍了JavaScript 上传文件限制参数案例详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
1，上传文件限制
1，防止前端操作上传异常文件
2，限制符合的规则，优化展示模型
1，获取file实例
2，执行校验规则方法
代码如下：
//大小限制
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() {
//分析数据，对数据进行判断 符合规则 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)
//分析数据，对数据进行判断 符合规则 resolve()
}
video.src = url
video.load() // fetches metadata
}).then(
() => {
return true
},
() => {
//操作提示
return Promise.reject()
}
)
}
实际调用
//获取file实例
Screen(){
//获取权限规则
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
//输出结果
return isFileSize && isFileType && isImageLimit
} else if (fileLimit&& fileLimit.type * 1 === 2) {
//视频素材
const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true
//输出结果
return isFileSize && isFileType && isVideoLimit
} else {
//不限制
//输出结果
return isFileSize && isFileType
}
}
1，获取实例
2，执行方法。
到此这篇关于JavaScript 上传文件限制参数案例详解的文章就介绍到这了,更多相关js 上传文件限制参数内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的JavaScript 上传文件限制参数案例详解全部内容，希望文章能够帮你解决JavaScript 上传文件限制参数案例详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。