jquery实现上传图片及图片大小验证、图片预览效果代码
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 = "<imgsrc='" + imgpath + "' border=0 width=200 height=150><imgsrc='images/u51.png' width='16' height='14' onclick='delimage(" + index+ ");' />";
}
if (index >=3){
var cnt = index + 1;
$("img" + cnt).style.display = "";
}
}
jquery实现上传图片及图片大小验证、图片预览效果代码的更多相关文章
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- ThinkPHP5与JQuery实现图片上传和预览效果
内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...
- JS兼容各个浏览器的本地图片上传即时预览效果\、
在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...
- 基于jquery实现的上传图片及图片预览效果代码
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- 微信小程序图片上传放大预览删除代码
效果: 一,下面是上传图片的效果 image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { v ...
- ckeditor 实现图片上传以及预览(亲测有效)
引用ckeditor <script type="text/javascript" src="static/ckeditor/ckeditor.js"&g ...
- javascript和HTML5上传图片之前实现预览效果
一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
随机推荐
- 基于MATLAB的滤波算法
目前比较经典的图像去噪算法主要有以下三种: 均值滤波:也称线性滤波,主要思想为邻域平均法,即用几个像素灰度 的平均值来代替每个像素的灰度.有效抑制加性噪声,但容易引起图像模糊, 可以对其进行改进, ...
- java中的泛型类和泛型方法
1.泛型是什么? 泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类. 可以在集合框架(Collection fram ...
- 书写优雅的shell脚本(插曲) - kill
shell之kill.killall.xkill.pkill 2013-01-08 22:03:28| 分类: Linux|举报|字号订阅 1 kill kill的应用是和ps 或pgrep 命令结 ...
- CentOS 6.5升级到CentOS 7
CentOS7 已经发布了,之前一直想在上面测试一下,一直没有机会,这次终于可以感受一下CentOS7了.一直使用CentOS6.5有一段时间了,但是由于它的内核版本依然停留在2.6.32,所以决定升 ...
- 移动web开发-------meta
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”v ...
- DebugView 使用
最近遇到带加密狗的工程项目,无法使用控制台调试,尝试使用DebugView进行辅助调试. DebugView是一个系统调试信息输出的捕获工具,可以捕获程序中由TRACE(debug版本)和Output ...
- 什么是位、字节、字、KB、MB?
1. 位(bit)是计算机里最小的数据单位,每一位的状态只能是0或者1 2. 字节(Byte) 1Byte = 8 bit 它是存储空间的基本计量单位,1byte可以存储一个英文字 ...
- 记一次OutOfMemory定位过程
背景 最近有个项目部署到了AWS,部署方案是ECS+Docker+Java Launch type CPU Units Memory FARGATE 1024 4G 运行后发现程序表现不符合预期--每 ...
- git 基本命令详细解释
创建: 2017-04-05 17:04:03 2017-04-24 更新: 2017-05-16 更新: 2017-06-27 完善git remote add 更新: 2017 ...
- [原]Windows下openssl的下载安装和使用
安装openssl有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.下面对两种方式均进行详细描述. 一.下载和安装openss 方法一:直接使用openssl安装包 W ...