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

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

要点：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. springmvc(四) springmvc的数据校验的实现

    so easy~ --WH 一.什么是数据校验? 这个比较好理解,就是用来验证客户输入的数据是否合法,比如客户登录时,用户名不能为空,或者不能超出指定长度等要求,这就叫做数据校验. 数据校验分为客户端 ...

  2. Go语言学习笔记（三）数组 & 切片 & map

    加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 数组 Arrays 数组是同一种数据类型的固定长度的序列. 数组是值类型,因此改变副本的值,不会改变本身的值: 当 ...

  3. HTTP消息中Header头部信息整理

    1.HTTP请求方式 GET 向Web服务器请求一个文件 POST 向Web服务器发送数据让Web服务器进行处理 PUT 向Web服务器发送数据并存储在Web服务器内部 HEAD 检查一个对象是否存在 ...

  4. MongoDB数据库聚合

    前面的话 聚合操作主要用于对数据的批量处理,将记录按条件分组以后,然后再进行一系列操作,例如,求最大值.最小值.平均值,求和等操作.聚合操作还能够对记录进行复杂的操作,主要用于数理统计和数据挖掘.在 ...

  5. 前端模块化工具--webpack使用感受

    话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触.因为之前使用gulp来作为自己的项目构建工具.现在感觉gulp使用的趋势在减少.现在这段时间去接触了webpack, ...

  6. shell统计文本中单词的出现次数

    Ubuntu14.04 给定一个文本,统计其中单词出现的次数 方法1 # solution 1 grep与awk配合使用,写成一个sh脚本 fre.sh sh fre.sh wordfretest.t ...

  7. 解决win10注册错误 错误代码0x8002801c

    使用win10的过程中经常碰到各种注册错误,让人抓狂!!! 现在分享一个完美的解决方法(非原创): 最简洁的办法是:1.自行将msinet.ocx(win10系统64位)组件复制到C:\Windows ...

  8. nyoj_16:矩形嵌套

    DAG上的动态规划 小技巧:max_element(a, a+n)返回的是数组a从下标0的位置到下标n-1的位置中的n个元素中最大元素的地址. 题目链接: http://acm.nyist.net/J ...

  9. python的数据类型及操作

    简述python的几种简单的数据类型及使用方式 字符串 字符串是不可变数据类型,拥有多种内置方法可以操作. 创建字符串就是给变量分配一个字符串的值即可.通常用引号创建字符串. tell = 'my n ...

  10. (转)Spring的单例模式底层实现

    单例模式也属于创建型模式,所谓单例,顾名思义,所指的就是单个实例,也就是说要保证一个类仅有一个实例. 单例模式有以下的特点: ① 单例类只能有一个实例 ② 单例类必须自己创建自己的唯一实例 ③ 单例类 ...