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

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

要点：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. static 还是readonly 还是static readonly

    一.   static 多对象共享一段空间,或者说没有对象概念,就是类的概念,不需要实例化,自动被创建.多用于长期共享.不会为对象的创建或销毁而消失. public class C { ) publi ...

  2. LoadRunner接口工作总结

    因为工作中需要开发维护类似枢纽性质的平台,所以经常利用LR进行接口测试.接口自动化测试.接口压力测试.用多了LR,有点不愿意使用报文编辑器进行手工接口测试了.  接口脚本操作过程: 首先:打开LR,N ...

  3. BZOJ3575 HNOI2014 道路阻塞

    3575: [Hnoi2014]道路堵塞 Time Limit: 10 Sec  Memory Limit: 128 MB Description A国有N座城市,依次标为1到N.同时,在这N座城市间 ...

  4. 函数响应式编程及ReactiveObjC学习笔记 (二)

    之前我们初步认识了RAC的设计思路跟实现方式, 现在我们再来看看如果使用它以及它能帮我们做什么 One of the major advantages of RAC is that it provid ...

  5. Carthage的安装和使用

    为什么要使用Carthage CocoaPods是已存在很长时间的Cocoa依赖管理器, 那么为什么要创建Carthage呢? CoaoaPods是一套整体解决方案,我们在Podfile中指定好我们需 ...

  6. maven简介及基础使用

    一.Maven简介 Maven可译为"知识的积累"."专家",主要服务于基于Java平台的项目构建.依赖管理和项目信息管理. 1.Maven-项目构建工具    ...

  7. tensorflow l2_loss函数

    1.l2_loss函数 tf.nn.l2_loss(t, name=None) 解释:这个函数的作用是利用 L2 范数来计算张量的误差值,但是没有开方并且只取 L2 范数的值的一半,具体如下: out ...

  8. GetConsoleTitle 函数--获取控制台窗口标题

    GetConsoleTitle函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms683174(v=vs.85).aspx ...

  9. HTTP权威指南-连接管理

    现在已经开始学习到第四章咯,坚持就是胜利哟~!ok,废话少说,继续写笔记. 本章中我们要介绍到HTTP的连接.好,现在有几个问题,我列出来了,带着这几个问题,我们进入本章的学习. 1.HTTP是如何使 ...

  10. Java之集合初探（二）Iterator（迭代器），collections，打包/解包（装箱拆箱），泛型(Generic)，comparable接口

    Iterator(迭代器) 所有实现了Collection接口的容器都有一个iterator方法, 用来返回一个实现了Iterator接口的对象 Iterator对象称作迭代器, 用来方便的实现对容器 ...