【Js应用实例】限制上传图片大小
需求：前端页面开发中，常遇到图片上传的需求，一般要求限制图片格式及大小。
说明：这里就把实现此功能所需代码贴出来，供同志们参考，也方便我以后复用。
要点：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应用实例】限制上传图片大小的更多相关文章
- Javascript 验证上传图片大小[客户端验证]
需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上, ...
- js获取图片的真实大小，字节大小
在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...
- 分享:JS比较两个日期大小
发布:thatboy 来源:Net [大 中 小] 本文介绍下,在javascript代码中,比较两个日期大小的方法,有需要的朋友参考下. 转自:http://www.jbxue.com/ ...
- Node.js入门实例程序
在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...
- js两个日期对比大小
//适合格式(0000-00-00) //日期比较 function dateCompare(startdata, enddata) { var arr = startdata.split(&quo ...
- ORACLE_修改实例的内存大小
注:本文来源于:星火spark <Oracle的实例占用内存调整> ORACLE_修改实例的内存大小 一:修改oracle数据库实例内存大小脚本 ---- 1.操作 (oracle使用内 ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- js分页实例
js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...
随机推荐
- 钉钉 机器人接入 自定义webhook
钉钉出了个webhook机器人接入,自定义的机器人支持随时post消息到群里: 昨天就尝试着用C#写了个: 一开始用python写,但是莫名的提示 {"errmsg":" ...
- ServerSocket与Socket类
ServerSocket与Socket类 TCP套接字协议: TCP最主要的特征就是能够建立长时间的连接,而且能够保证数据安全的送达,但是速度比较慢.使用TCP进行连接的时候会有三次握手,之后才建立起 ...
- luogu P3398 仓鼠找sugar [LCA]
题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而他的基友同时要从他的卧室(c) ...
- IDEA 单元测试testng入门及testng.xml
直接进入正题: 1.TestNG的运行方式如下: With a testng.xml file 直接run as test suite With ant 使用ant From the command ...
- RobotFramwork安装报错name 'execfile' is not defined
安装RobotFramwork的时候,提示了这个?是什么原因呢? 本机装的是python3.6: 经官方回复得知识因为python的版本不兼容该模块的安装. 官方认定版本是2.7,所以这里推荐大家玩p ...
- perl的INC设置
perl中的INC变量中包含了所有的perl module的查找路径. 可以使用perl -V 来查看INC的值. 1)默认地INC如下: @INC: C:/Perl/site/lib C ...
- c3p0数据库连接池+mysql数据库基本使用方法
一般我们在项目中操作数据库时,都是每次需要操作数据库就建立一个连接,操作完成后释放连接.因为jdbc没有保持连接的能力,一旦超过一定时间没有使用(大约几百毫秒), 连接就会被自动释放掉. ...
- 40. leetcode 202. Happy Number
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...
- Java中Scanner的输入流的关闭问题
为什么Scanner in语句只能关闭一次,且对于其他任何Scanner输入流也关闭? 代码如图 import java.util.Scanner; public class ScannerTest ...
- Typescript变量声明
let 和 const 是 javascript 里面最新的变量声明方式,let 与 var 很相似,而 const 是 let 的增强,能阻止对一个变量的再次赋值. var 声明 弱类型:var 声 ...