基于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 相关文章推荐
document.all与WEB标准
May 13 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
从原生JavaScript到React深入理解
Jul 23 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删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python数据类型学习笔记
2016/01/13 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python3 线性回归验证方法
2019/07/09 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
增大python字体的方法步骤
2020/07/05 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
乡镇食品安全责任书
2014/07/28 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
内勤岗位职责
2015/02/10 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
导游词之无锡梅园
2019/11/28 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS