基于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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
为什么node.js不适合大型项目
Apr 28 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
浅谈php://filter的妙用
2019/03/05 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
初学python数组的处理代码
2011/01/04 Python
python调用shell的方法
2013/11/20 Python
Python登录注册验证功能实现
2018/06/18 Python
详解python中的json和字典dict
2018/06/22 Python
Python微信操控itchat的方法
2019/05/31 Python
Django 重写用户模型的实现
2019/07/29 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
python创建n行m列数组示例
2019/12/02 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
防暑降温通知书
2015/04/27 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
欧元符号 €
2022/02/17 杂记