基于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 相关文章推荐
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
js实现简单的计算器功能
Jan 16 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 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
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
php文件系统处理方法小结
2016/05/23 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
React Router v4 入坑指南(小结)
2018/04/08 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
利用Python写一个爬妹子的爬虫
2018/06/08 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python实现定时发送qq消息
2019/01/18 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
python 实现表情识别
2020/11/21 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
运动会致辞稿50字
2014/02/04 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
百日安全生产活动总结
2014/07/05 职场文书
房屋产权证明书
2014/10/15 职场文书
物业保洁员管理制度
2015/08/05 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技