基于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 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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 4.2书写安全的脚本
2006/10/09 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
php数组和链表的区别总结
2019/09/20 PHP
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python conda操作方法
2019/09/11 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
Java编程面试题
2016/04/04 面试题
给女儿的表扬信
2014/01/18 职场文书
企业金融服务方案
2014/06/03 职场文书
学生会辞职信
2015/03/02 职场文书
市场部岗位职责范本
2015/04/15 职场文书
家长反馈意见及建议
2015/06/03 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
Python测试框架pytest高阶用法全面详解
2022/06/01 Python