基于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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
js post提交调用方法
2014/02/12 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
numpy库reshape用法详解
2020/04/19 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
采购部部门职责
2013/12/15 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
干部培训自我鉴定
2014/01/22 职场文书
护理专业自荐书
2014/06/04 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
2015年见习期工作总结
2014/12/12 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Python django中如何使用restful框架
2021/06/23 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android