基于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 学习之二 属性(html()与html(val))
Nov 25 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
JS解析XML实例分析
Jan 30 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
php cli 小技巧
2013/06/03 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
javascript基本语法
2016/05/31 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python遍历数组的方法小结
2015/04/30 Python
Python算术运算符实例详解
2017/05/31 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
大一自我鉴定范文
2013/12/27 职场文书
九年级化学教学反思
2014/01/28 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
后备干部培训方案
2014/05/22 职场文书
大学生工作自荐书
2014/06/16 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书