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

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

要点：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. Java之面向对象例子（一）

    定义一个人类,给这个类定义一个从身份证获取生日的方法,输入身份证,获取出生年月日 //主方法 package com.hanqi.maya.model; import java.util.Scanne ...

  2. 【微信小程序】wx.openLocation调取失败

    在调取地图的时候发现,wx.openLocation的方法在模拟器和安卓手机上都可以用,在苹果手机上报错. 报错为调取失败:fail invoke too frequently             ...

  3. centos/linux alternatives与update-alternatives详解与软件版本切换

    update-alternatives是linux系统中专门维护系统命令链接符的工具,通过它可以很方便的设置系统默认使用哪个命令.哪个软件版本,比如,我们在系统中同时安装了open jdk和sun j ...

  4. JavaScript中的设计模式：单例模式

    定义 单例模式就是一个类只能实例化一个对象,并且提供了一个访问它的全局访问点. 一般在实现登陆框,或者一个全局的控制器都会用到单例模式.现实中有window对象,线程池,全局缓存等. 简单实现 var ...

  5. [luogu P3797] 妖梦斩木棒 [线段树]

    题目背景 妖梦是住在白玉楼的半人半灵,拥有使用剑术程度的能力. 题目描述 有一天,妖梦正在练习剑术.地面上摆放了一支非常长的木棒,妖梦把它们切成了等长的n段.现在这个木棒可以看做由三种小段构成,中间的 ...

  6. Angular02 将数据添加到组件中

    准备:已经搭建好angular-cli环境.知道如何创建组件 一.将一个数据添加到组件中 1 创建一个新的组件 user-item 2 将组件添加到静态模板中 3 为组件添加属性,并利用构造器赋值 4 ...

  7. SignalR在ASP.NET MVC中的应用

    一.简介 ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得 ...

  8. HDOJ2008-数值统计

    Problem Description 统计给定的n个数中,负数.零和正数的个数.   Input 输入数据有多组,每组占一行,每行的第一个数是整数n(n<100),表示需要统计的数值的个数,然 ...

  9. python3网络编程之socketserver

    本节主要是讲解python3网络编程之socketserver,在上一节中我们讲到了socket.由于socket无法支持多用户和多并发,于是就有了socket server. socket serv ...

  10. jsp EL表达式和JSTL标签if-else if-else用法

    java web javaEE ,jsp EL表达式和JSTL标签if-else if-else四种用法一.条件运算符 ${user.gender==?'男':'女'} 二.if() <c:if ...