需求：前端页面开发中，常遇到图片上传的需求，一般要求限制图片格式及大小。

说明：这里就把实现此功能所需代码贴出来，供同志们参考，也方便我以后复用。

要点：1.处理 类型type为file的输入元素的value值，进行判断。2.处理类型type为file的输入元素的files[0].size值。

备注：当然value和 size都是浏览器提供的api

代码：

<!DOCTYPE html>
<html>
<body>

<!-- 注意此处form的name属性为form 这样才可以document.form通过name属性获得元素 -->
<form action="" name="formx" method="post" enctype="multipart/form-data">
	<!-- 图片选中后触发onchange事件 -->
	<input type="file" name="userfile" onchange="check()"/>
	<!-- 存放页面反馈信息的dom节点 -->
	<span id="spacex"></span>
</form>

</body>
<script type="text/javascript">
	function check(){
		//分割上传文件字符串  userfile的value为上传文件的名称 类型为字符串。
		var fileNameArr = document.formx.userfile.value.toLowerCase().split('.');
					 //或者document.getElementById("userfile")	也可以获得该dom元素
		//文件名后缀
		var suffix = fileNameArr[fileNameArr.length-1];
		//如果后缀为空
		if(suffix==""){
			alert("图片不能为空！");
			return false;
		}else{
			if(suffix=='gif'||suffix=='jpg'||suffix=='bmp'||suffix=='png'||suffix=='jpeg'){
				var imgSize = document.formx.userfile.files[0].size;
				alert("图片大小："+imgSize+"B");
				if(imgSize<1024*1024*3){
					document.getElementById("spacex").innerText = "文件小于3m ok!";
					return true;
				}
			}else{
				document.getElementById("spacex").innerText = "请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片";
				return false;
			}
		}
	}
</script>

</html>

【Js应用实例】限制上传图片大小的更多相关文章

  1. Javascript 验证上传图片大小[客户端验证]

    需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上, ...

  2. js获取图片的真实大小，字节大小

    在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...

  3. 分享:JS比较两个日期大小

    发布:thatboy   来源:Net     [大 中 小] 本文介绍下,在javascript代码中,比较两个日期大小的方法,有需要的朋友参考下. 转自:http://www.jbxue.com/ ...

  4. Node.js入门实例程序

    在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...

  5. js两个日期对比大小

     //适合格式(0000-00-00) //日期比较 function dateCompare(startdata, enddata) { var arr = startdata.split(&quo ...

  6. ORACLE_修改实例的内存大小

    注:本文来源于:星火spark  <Oracle的实例占用内存调整> ORACLE_修改实例的内存大小 一:修改oracle数据库实例内存大小脚本 ---- 1.操作 (oracle使用内 ...

  7. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  8. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  9. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  10. js分页实例

    js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...

随机推荐

  1. windows上定时执行php文件

    <?php $fp = fopen("E:/wwwroot/test/plan.txt", "w+"); fwrite($fp, date("Y ...

  2. Tomcat结构（转）

    资料:http://wenku.baidu.com/view/20720e78a26925c52cc5bfd6.html Tomcat系统架构 http://wenku.baidu.com/view/ ...

  3. 【Apache】 VirtualHost配置

    主要配置两点: 1)配置vhost ,可单独建文件,也可直接在http.conf添加内容 如果单独建文件,查看http.conf 中Include 配置文件的路径,并在对应路径新建http_vhost ...

  4. js中常用的日期总结

    js开发中经常用到日期,这里总结一下: /** * 获取当前日期 * 格式:2017-07-31 13:45:14 */ function getNowFormatDate() { var date ...

  5. [COGS 2051] 王者之剑

    Saber大法吼 2051. 王者之剑 ★★★☆   输入文件:Excalibur.in   输出文件:Excalibur.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述 ...

  6. 《深入理解Java虚拟机》虚拟机类加载机制

    上节学习回顾 上一节,我们深入到类文件去了解其结构细节,也大概对类文件的编写规则略知一二了,解析来我们就得学习这个类文件是如何被加载到Java虚拟机的,看看有什么引人入胜的奥秘. 本节学习重点 大部分 ...

  7. 使用 Router 实现的模块化，如何优雅的回到主页面

    使用 Router 实现的模块化,如何优雅的回到主页面 版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 未经允许,不得转载. 一.前言 现在越来越多的 App ...

  8. Thread（线程）四

    今天继续讲讲线程的异常处理.线程取消.多线程的临时变量和线程安全lock的问题. 1.异步处理. 一般来说如果是同步方法的异步处理,我们大多都是try catch住,但是异步方法应该怎么做呢. #re ...

  9. 【万能的搜索，用广搜来解决DP问题】ZZNU -2046 : 生化危机 / HDU 1260:Tickets

    2046 : 生化危机 时间限制:1 Sec内存限制:128 MiB提交:19答案正确:8 题目描述 当致命的T病毒从Umbrella Corporation 逃出的时候,地球上大部分的人都死去了. ...

  10. [补档][HNOI 2008]GT考试

    [HNOI 2008]GT考试 题目 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字. 他的不吉利数学A1A2... ...