js 上传图片文件，限制格式、大小和尺寸

2024-02-12 09:45| 来源: 网络整理| 查看: 265

通过js限制上传图片前言做前端项目时，经常会用到form表单，偶尔也会用到input标签来提交上传图片文件。在上传文件时，有时候会有一定的条件，比如图片格式、大小及尺寸。

通过js，可以在前端来设置上传图片的格式、尺寸及大小，并验证。

主要方法

1、设置上传图片的格式

jsp代码，设置form表单的input标签

onchange属性：在域的内容改变时发生。 js代码，设置图片的格式 //验证上传文件的格式 function verificationPicFile(file) { var fileTypes = [".jpg", ".png", ".jpeg", ".PNG", ".gif"];//文件后缀只能是这五类 var filePath = document.getElementById("file").value;//返回的是上传文件的路径名例如：E:\xx\xxx.jpg //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false if(filePath){ var isNext = false; var fileEnd = filePath.substring(filePath.indexOf("."));//截取文件名的后缀 for (var i = 0; i < fileTypes.length; i++) { if (fileTypes[i] == fileEnd) { isNext = true; break; } } if (!isNext){ alert('不接受此文件类型'); document.getElementById("file").value = "";//如果文件后缀名不符合，清空已选择文件 return false; } }else { return false; } } 2、设置上传图片的大小 //图片大小验证 function verificationPicFile(file) { var fileSize = 0; var fileMaxSize = 1024;//1M var filePath = file.value; if(filePath){ fileSize =file.files[0].size; var size = fileSize / 1024; if (size > fileMaxSize) { alert("文件大小不能大于1M！"); file.value = ""; return false; }else if (size

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章