基于jquery实现的上传图片及图片大小验证、图片预览效果代码


Posted in Javascript onApril 12, 2011

jquery实现上传图片及图片大小验证、图片预览效果代码
上传图片验证

*/ 
function submit_upload_picture(){ 
var file = $('file_c').value; 
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ 
alert("图片类型必须是.gif,jpeg,jpg,png中的一种") 
}else{ 
$('both_form').action="file!upload.action"; 
$('both_form').submit(); 
$('insert_img').sethtml('<img src="http://images.anjiwu.com/images/loading.gif"/>'); 
$('display_div').setstyle('display', 'block'); 
$('upload_div').setstyle('display', 'none'); 
} 
}

图片类型与大小的验证
//实例二 
function validate_edit_logo(a){ 
var file = $('file').value; 
if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ 
alert("图片类型必须是.gif,jpeg,jpg,png中的一种") 
if(a==1){ 
return false; 
} 
}else{ 
var image = new image(); 
image.src = file; 
var height = image.height; 
var width = image.width; 
var filesize = image.filesize; 
$('beforeend').src=file; 
$('div_regi_right').setstyle('display', 'block'); 
if(width>80 && height>80 && filesize>102400){ 
alert('请上传80*80像素 或者大小小于100k的图片'); 
if(a==1){ 
return false; 
} 
} 
if(a==1){ 
return true; 
} 
} 
}

图片预览
//实例三 
function viewimg(index) { 
var name = 'uploadimg' + index; 
var imgup = $(name); 
var imgpath = getpath(imgup); 
var local = imgup.value; 
var point = local.lastindexof("."); 
//判断上传文件大小 
var img = document.createelement("img"); 
img.src = local; 
var filesize = img.filesize; 
img.onload = function(){filesize=this.filesize;} 
if(img.filesize>5242880){ 
alert("图片文件过大!"); 
return false; 
} 
//判断是否是图片格式 
var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.value.length); 
imgname = imgname.tolowercase(); 
if ((imgname != ".jpg") && (imgname != ".gif") && (imgname != ".jpeg") && (imgname != ".png") && (imgname != ".bmp")) { 
alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!"); 
imgup.focus(); 
//清空file里面的值www.3ppt.com 
imgup.select(); 
document.selection.clear(); 
} else { 
//显示图片 
document.getelementbyid("sig_preview"+index).innerhtml = "<img src='" + imgpath + "' border=0 width=200 height=150><img src='images/u51.png' width='16' height='14' onclick='delimage(" + index + ");' />"; 
} 
if (index >=3){ 
var cnt = index + 1; 
$("img" + cnt).style.display = ""; 
} 
}
Javascript 相关文章推荐
document.compatMode介绍
May 21 Javascript
浅谈javascript的数据类型检测
Jul 10 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 #Javascript
window.dialogArguments 使用说明
Apr 11 #Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 #Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 #Javascript
基于jquery的监控数据是否发生改变
Apr 11 #Javascript
jQuery实战之品牌展示列表效果
Apr 10 #Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 #Javascript
You might like
多文件上载系统完整版
2006/10/09 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
资金主管岗位职责范本
2014/03/04 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL