基于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入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
JS支持带x身份证号码验证函数
Aug 10 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
jquery实现用户打分评分特效
May 28 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
vue组件开发之slider组件使用详解
Aug 21 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
python绘制立方体的方法
2018/07/02 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
django跳转页面传参的实现
2020/09/17 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
高中军训感言200字
2014/02/23 职场文书
元旦促销方案
2014/03/15 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
个人年终总结怎么写
2015/03/09 职场文书
安全员岗位职责范本
2015/04/11 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js