基于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 mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
js模糊查询实例分享
Dec 26 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 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
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
详解如何设置Python环境变量?
2019/05/13 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python 实现视频 图像帧提取
2019/12/10 Python
python实现udp聊天窗口
2020/03/31 Python
使用Python实现批量ping操作方法
2020/05/06 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
小学入学感言
2015/08/01 职场文书
情况说明书怎么写
2015/10/08 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
美元符号 $
2022/02/17 杂记