Js如何限制上传的视频文件分辨率大小？

逃离我推掉我的手 2024-03-16 10:33 45阅读 0赞

直接上代码，结合了**vue**与**jquery**的一些语法。  
(注：当然用纯 js 也是可以的，语法稍微改变一下而已)

<div>
    	<input type="file" id="upload-video" accept="video/*">
    </div>

mounted() {
        
    	this.verifyRadio();
    },
    methods: {
        
    	verifyRadio(){
        
    		$("#upload-video").on("change",(e)=>{
         //使用jquery的获取方式，记得导入jquery
    			const inputDom = e.target; //获取input标签的dom
    			let file = inputDom.files[0];
    			if(file){
        
    				let videoUrl = URL.createObjectURL(file);
    				const videoDom = document.createElement("video"); //创建video标签dom
    				videoDom.src = videoUrl;
    				videoDom.addEventListener('loadedmetadata', function (){
          //当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。
    					if(this.videoWidth>1920 || this.videoHeight>1080){
        
    						console.error("视频分辨率不能大于1080p",this.videoWidth,this.videoHeight);
    					}else{
        
    						console.log("视频分辨率符合要求：",this.videoWidth,this.videoHeight);
    					}
    				});
    			}else{
        
    				console.error("文件不存在");
    			}
    		})
    	}
    }

壁纸放送：  
![在这里插入图片描述][d7da5ea948c44997b271e9ca8e0a39b3.jpeg_pic_center]

[d7da5ea948c44997b271e9ca8e0a39b3.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/731e52d95b364180b6f94338b73c4a6d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关 iis上传文件大小限制

iis上传文件大小限制在web.config文件中加入如下语句： <security> <requestFiltering> <r

深藏阁楼爱情的钟/ 2024年04月06日 14:10/ 0 赞/ 107 阅读

相关 Js如何限制上传的视频文件分辨率大小？

直接上代码，结合了vue与jquery的一些语法。 (注：当然用纯 js 也是可以的，语法稍微改变一下而已)  <div>

逃离我推掉我的手/ 2024年03月16日 10:33/ 0 赞/ 46 阅读

相关 JS实现限制input上传文件的大小和格式

场景在实现Excel导入数时，需要上传excel格式的文件。在前端js进行判断，限制上传文件的大小和格式。实现 html页面代码可以通过accept属性来

偏执的太偏执、/ 2023年10月18日 15:50/ 0 赞/ 187 阅读

相关 input限制上传的文件大小

需要限制`input`上传的文件大小默认 `input` 上传文件的单位为 Byte (字节) 单位换算 1024Byte = 1KB 1024KB =

待我称王封你为后i/ 2023年02月27日 12:10/ 0 赞/ 82 阅读

相关【ownCloud】ownCloud上传文件大小限制

问题描述：本地部署的ownCloud服务器，上传文件提示文件大小限制2MB ![20200807103257219.png][] 解决方法：修改php配置文件，放开限制

Bertha 。/ 2022年11月25日 04:13/ 0 赞/ 540 阅读

相关 Nginx 文件上传大小限制设置

需要找到对应的Nginx 配置文件。我这边的配置文件在/etc/nginx/conf.d下面 ![20210804154500938.png][] 在配置文件中添加如下

水深无声/ 2022年09月03日 00:16/ 0 赞/ 316 阅读

相关 springboot 文件上传大小限制

错误信息 the request was rejected because its size (13472920) exceeds the configured maximu

╰+哭是因爲堅強的太久メ/ 2022年04月23日 00:36/ 0 赞/ 392 阅读

相关 SpringBoot 配置上传文件大小限制

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: Th

迈不过友情╰/ 2022年03月14日 19:46/ 0 赞/ 371 阅读

相关关于上传文件的大小限制

Springboot项目关于上传文件的大小限制 1，第一种处理方式 application.properties中添加 maxFileSize 是单个文件大小

梦里梦外;/ 2021年09月01日 07:00/ 0 赞/ 616 阅读

相关 js 限制 input 文件上传的大小和格式

最近在项目中需要一些文件大小和格式的校验，整理了一下作为日后的参考废话不多说，上代码： Javascript: //验证上传文件大小和类型

梦里梦外;/ 2021年06月26日 16:06/ 0 赞/ 770 阅读