基于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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
JS数组的高级使用方法示例小结
Mar 14 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程序中防止盗链
2008/04/09 PHP
ThinkPHP路由详解
2015/07/27 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
python模拟Django框架实例
2016/05/17 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
化工工艺专业求职信
2013/09/22 职场文书
医学生自我鉴定范文
2013/11/08 职场文书
小小的船教学反思
2014/02/21 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
班组建设经验交流材料
2014/05/12 职场文书
退学证明范本3篇
2014/10/29 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
TS 类型收窄教程示例详解
2022/09/23 Javascript