×

上传图片及验证图片大小等效果

作者:天空2017.08.14来源:Web前端之家浏览:9494评论:0
关键词:JQueryJS

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 = ""; 
} 
}

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1488297600907.html

网友评论文明上网理性发言 已有0人参与

发表评论: