基于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 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
浅谈document.write()输出样式
May 07 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 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 网页过期时间的控制代码
2009/06/29 PHP
Destoon模板制作简明教程
2014/06/20 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
JS实现吸顶特效
2020/01/08 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
python实现socket端口重定向示例
2014/02/10 Python
Python创建xml文件示例
2017/03/22 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python使用turtle库绘制时钟
2020/03/25 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
国外软件测试工程师面试题
2016/12/09 面试题
大学生自荐书范文
2013/12/10 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
社区反邪教工作方案
2014/06/16 职场文书
农行心得体会
2014/09/02 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫