图片上传js验证图片长宽_JS判断图片上传_限制格式、类型、尺寸

该博客介绍了如何使用JavaScript实现图片上传时的格式、类型和尺寸验证。通过创建隐藏的img元素加载上传图片,然后获取其宽度和高度来判断尺寸是否符合要求,同时检查文件扩展名以确保图片类型正确。示例代码展示了针对不同尺寸要求的图片上传验证方法。
摘要由CSDN通过智能技术生成

用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&ltinput type="file" id="UpFile_Photo1" runat="server" name="UpFile_Photo1"

2size="35" onpropertychange="CheckFile(this.value,this)"&gt小图&ltbr /&gt

3&ltinput type="file" id="UpFile_Photo2" runat="server" name="UpFile_Photo2"

4size="35" onpropertychange="CheckFile(this.value,this)"&gt中图&ltbr /&gt

5&ltinput type="file" id="UpFile_Photo3" runat="server" name="UpFile_Photo3"

6size="35" onpropertychange="CheckFile(this.value,this)"&gt大图&ltbr /&gt

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我已经根据您的要求进行了修改。下面是根据您的要求优化过的 `create_boxplot` 函数的代码: ```python import os import matplotlib.pyplot as plt import sys def create_boxplot(rbp_name, data, subfolders): fig, ax = plt.subplots(figsize=(10, 6)) boxprops = dict(linewidth=2) medianprops = dict(linewidth=2, color='red') whiskerprops = dict(linewidth=2) capprops = dict(linewidth=2) ax.boxplot(data, boxprops=boxprops, medianprops=medianprops, whiskerprops=whiskerprops, capprops=capprops) x_labels = [f'Ctrl_{subfolder}\nrep1_{subfolder}\nrep2_{subfolder}' for subfolder in subfolders] ax.set_xticklabels(x_labels, rotation=0, fontsize=8) ax.set_xlabel('Conditions', fontsize=12) ax.set_ylabel('Expression Level', fontsize=12) ax.set_title(f'{rbp_name} Expression Box Plot', fontsize=14) plt.tight_layout() plt.savefig(os.path.join(rbp_name, f'{rbp_name}_boxplot.pdf')) plt.close() if __name__ == "__main__": rbp_name = sys.argv[1] subfolders = ['lncRNA', 'miRNA', 'mRNA', 'snoRNA', 'snRNA', 'tRNA'] # 提取数据 data = extract_data(rbp_name) # 创建箱线图 create_boxplot(rbp_name, data, subfolders) ``` 在优化后的 `create_boxplot` 函数中,我添加了一些参数来控制箱线图的样式,包括 `boxprops`、`medianprops`、`whiskerprops` 和 `capprops`。我还设置了 x 轴标签的字体大小,并添加了 x 轴和 y 轴标签以及标题。 此外,我还添加了 `figsize` 参数来限制图片长宽比例为 10:6,并使用 `tight_layout` 函数来自动调整图像的边距。 请尝试运行修改后的代码,看看是否满足您的需求。如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值