基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼

更新時(shí)間：2011年04月12日 00:10:13 作者：

基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼，需要的朋友可以參考下。

jquery實(shí)現(xiàn)上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
上傳圖片驗(yàn)證

 
*/ 
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'); 
} 
} 

圖片類型與大小的驗(yàn)證

復(fù)制代碼代碼如下:

 
//實(shí)例二 
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('請(qǐng)上傳80*80像素 或者大小小于100k的圖片'); 
if(a==1){ 
return false; 
} 
} 
if(a==1){ 
return true; 
} 
} 
} 

圖片預(yù)覽

復(fù)制代碼代碼如下:

 
//實(shí)例三 
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("圖片文件過(guò)大！"); 
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(); 
//清空f(shuō)ile里面的值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 = ""; 
} 
} 

您可能感興趣的文章:

相關(guān)文章

jQuery圖片切換插件jquery.cycle.js使用示例
Cycle供了非常好的功能來(lái)幫助大家更簡(jiǎn)單的使用插件的幻燈功能，下面是它的一個(gè)非常不錯(cuò)的示例，大家可以學(xué)習(xí)下
2014-06-06
讓圖片旋轉(zhuǎn)任意角度及JQuery插件使用介紹
圖片旋轉(zhuǎn)任意角度在某些應(yīng)用中時(shí)很有必要的，現(xiàn)在有一款JQuery插件可以辦得到，接下來(lái)為大家介紹下使用方法，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助
2013-03-03
jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)（生成樹(shù)）
本篇文章主要介紹了jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)（生成樹(shù)），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-02-02
jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)式透明度漸變動(dòng)畫效果,涉及jQuery事件響應(yīng)及動(dòng)態(tài)修改頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
jQuery處理XML文件的幾種方法
這篇文章主要為大家詳細(xì)介紹了jQuery處理XML文件的幾種形式方法,如何使用jQuery解析XML，感興趣的小伙伴們可以參考一下
2016-06-06
使用jQuery實(shí)現(xiàn)Web頁(yè)面換膚功能的要點(diǎn)解析
網(wǎng)頁(yè)換膚的實(shí)質(zhì)就是切換CSS樣式,關(guān)鍵是給用戶做出點(diǎn)擊切換的功能以及換膚完成之后的緩存記錄功能,下面我們就來(lái)看一下使用jQuery實(shí)現(xiàn)Web頁(yè)面換膚功能的要點(diǎn)解析:
2016-05-05
jquery.onoff實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)按鈕功能(推薦)
這篇文章主要介紹了jquery.onoff實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)按鈕功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用介紹
本篇文章介紹了，jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用。需要的朋友參考下
2013-04-04
JQuery與Ajax調(diào)用新浪API獲取短網(wǎng)址的代碼
這篇文章主要介紹了調(diào)用新浪API獲取短網(wǎng)址的方法有很多，本例為大家介紹下使用JQuery與Ajax來(lái)實(shí)現(xiàn)，需要的朋友可以參考下
2014-02-02
jQuery基于cookie實(shí)現(xiàn)的購(gòu)物車實(shí)例分析
這篇文章主要介紹了jQuery基于cookie實(shí)現(xiàn)購(gòu)物車的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery基于cookie實(shí)現(xiàn)針對(duì)商品信息的購(gòu)物車存儲(chǔ)功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12