基于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 相关文章推荐
javascript中强制执行toString()具体实现
Apr 27 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
小程序自定义日历效果
Dec 29 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
javascript实现下拉菜单效果
Feb 09 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生成zip压缩文件的方法详解
2013/06/09 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
angular.element方法汇总
2015/01/07 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python字符串连接方式汇总
2014/08/21 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
如何查找网页漏洞
2016/06/22 面试题
职工运动会感言
2014/02/07 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
师德师风自我评价范文
2014/09/11 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
大学生村官入党自传
2015/06/26 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle