JS判断图片上传_限制格式、类型、尺寸

时间:2022-08-25 20:35:29 阅读: 最新文章 文档下载
说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。

用HTML的File控件上传图片,用JS判断和限制图片格式、类型、尺寸

//判断图片类型

var f=document.getElementById("File1").value;

if(f=="")

{ alert("请上传图片");return false;}

else

{

if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f))

{

alert("图片类型必须是.gif,jpeg,jpg,png中的一种")

return false;

}

}

function CheckFile(f,p)

2{

3//判断图片尺寸

4var img=null;

5img=document.createElement("img");

6document.body.insertAdjacentElement("beforeend",img);

7img.style.visibility="hidden";

8img.src=f;

9var imgwidth=img.offsetWidth;

10var imgheight=img.offsetHeight;

11if(p.name=="UpFile_Photo1")

12{

13if(imgwidth!=68||imgheight!=68)

14{

15alert("小图的尺寸应该是68x68");

16}

17}

18if(p.name=="UpFile_Photo2")

19{

20if(imgwidth!=257||imgheight!=351)

21{

22alert("中图的尺寸应该是257x351");

23}

24}

25if(p.name=="UpFile_Photo3")

26{

27if(imgwidth!=800||imgheight!=800)

28{

29alert("大图的尺寸应该是800x800");

30}

31}

32//判断图片类型

33if(!/\.(gif|jpg|jpeg|bmp)$/.test(f))

34{

35alert("图片类型必须是.gif,jpeg,jpg,bmp中的一种")

36return false;

37}

38return true;

39}

1<input type="file" id="UpFile_Photo1" runat="server" name="UpFile_Photo1"

2size="35" onpropertychange="CheckFile(this.value,this)">小图<br />

3<input type="file" id="UpFile_Photo2" runat="server" name="UpFile_Photo2"

4size="35" onpropertychange="CheckFile(this.value,this)">中图<br />

5<input type="file" id="UpFile_Photo3" runat="server" name="UpFile_Photo3"

6size="35" onpropertychange="CheckFile(this.value,this)">大图<br />

本文来源:https://www.wddqw.com/doc/74f6dc252af90242a995e504.html