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

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

要点：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. 95后实习生的远程办公体验（asp.net mvc\C#技术栈）

    这个月我们做了一件别人看起来很疯狂的事情,就是让一批95后的实习生实行远程办公,效果还不错,于是写此文总结一下. 其实认真算算,我自己的远程工作经验有十年了吧,在北京工作的时候天气不好就申请在家办公, ...

  2. Java虚拟机：JVM内存分代策略

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! Java虚拟机根据对象存活的周期不同,把堆内存划分为几块,一般分为新生代.老年代和永久代(对HotSpot虚拟机而言),这就是JVM的内存 ...

  3. Python面向对象编程（一）

    1.什么是面向对象 面向对象(oop)是一种抽象的方法来理解这个世界,世间万物都可以抽象成一个对象,一切事物都是由对象构成的.应用在编程中,是一种开发程序的方法,它将对象作为程序的基本单元. 2.面向 ...

  4. Ajax的简单实用实例

    我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图:

  5. saveOrupdate和 merge的区别

    merge和saveOrUpdate方法区别在于:merge方法是把我们提供的对象转变为托管状态的对象:而saveOrUpdate则是把我们提供的对象变成一个持久化对象:说的通俗一点就是:saveOr ...

  6. Multimodal —— 看图说话（Image Caption）任务的论文笔记（二）引入attention机制

    在上一篇博客中介绍的论文"Show and tell"所提出的NIC模型采用的是最"简单"的encoder-decoder框架,模型上没有什么新花样,使用CNN ...

  7. 【ECHART】实例

    1. 带timeline   datazoom的例子 <!doctype html> <html> <head> <meta http-equiv=" ...

  8. ueditor编辑器使用总结

    ueditor使用小结 一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.ba ...

  9. js一些重点知识总结(二)

    第一部分:数据类型转换 1) 数据类型的种类: 数值型number.布尔型(true(1) /false (0)).字符串型(String).空类型(null)(object) 2) 数据类型自动转换 ...

  10. Android文件上传与下载

    文件上传与下载 文件上传 -- 服务端 以Tomcat为服务器,Android客服端访问Servlet,经Servlet处理逻辑,最终将文件上传,这里就是简单模拟该功能,就将文件上传到本机的D:\\u ...