【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 ...
随机推荐
- 95后实习生的远程办公体验(asp.net mvc\C#技术栈)
这个月我们做了一件别人看起来很疯狂的事情,就是让一批95后的实习生实行远程办公,效果还不错,于是写此文总结一下. 其实认真算算,我自己的远程工作经验有十年了吧,在北京工作的时候天气不好就申请在家办公, ...
- Java虚拟机:JVM内存分代策略
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! Java虚拟机根据对象存活的周期不同,把堆内存划分为几块,一般分为新生代.老年代和永久代(对HotSpot虚拟机而言),这就是JVM的内存 ...
- Python面向对象编程(一)
1.什么是面向对象 面向对象(oop)是一种抽象的方法来理解这个世界,世间万物都可以抽象成一个对象,一切事物都是由对象构成的.应用在编程中,是一种开发程序的方法,它将对象作为程序的基本单元. 2.面向 ...
- Ajax的简单实用实例
我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图:
- saveOrupdate和 merge的区别
merge和saveOrUpdate方法区别在于:merge方法是把我们提供的对象转变为托管状态的对象:而saveOrUpdate则是把我们提供的对象变成一个持久化对象:说的通俗一点就是:saveOr ...
- Multimodal —— 看图说话(Image Caption)任务的论文笔记(二)引入attention机制
在上一篇博客中介绍的论文"Show and tell"所提出的NIC模型采用的是最"简单"的encoder-decoder框架,模型上没有什么新花样,使用CNN ...
- 【ECHART】实例
1. 带timeline datazoom的例子 <!doctype html> <html> <head> <meta http-equiv=" ...
- ueditor编辑器使用总结
ueditor使用小结 一.简介 ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.ba ...
- js一些重点知识总结(二)
第一部分:数据类型转换 1) 数据类型的种类: 数值型number.布尔型(true(1) /false (0)).字符串型(String).空类型(null)(object) 2) 数据类型自动转换 ...
- Android文件上传与下载
文件上传与下载 文件上传 -- 服务端 以Tomcat为服务器,Android客服端访问Servlet,经Servlet处理逻辑,最终将文件上传,这里就是简单模拟该功能,就将文件上传到本机的D:\\u ...