基于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)證
//實(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ù)覽
//實(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 = "";
}
}
上傳圖片驗(yàn)證
復(fù)制代碼 代碼如下:
*/
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 = "";
}
}
您可能感興趣的文章:
- Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery 批量上傳圖片實(shí)現(xiàn)代碼
- 使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
- 簡(jiǎn)單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- jQuery AjaxUpload 上傳圖片代碼
- JQuery+ajax實(shí)現(xiàn)批量上傳圖片(自寫)
- jQuery實(shí)現(xiàn)上傳圖片前預(yù)覽效果功能
- 基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片
- jquery實(shí)現(xiàn)上傳圖片功能
相關(guān)文章
基于JQuery和CSS3實(shí)現(xiàn)仿Apple TV海報(bào)背景視覺(jué)差特效源碼分享
這是一款效果非常炫酷的jQuery和CSS3仿Apple TV海報(bào)背景視覺(jué)差特效。該視覺(jué)差特效在使用鼠標(biāo)在屏幕上下左右移動(dòng)的時(shí)候,海報(bào)中的各種元素以不同的速度運(yùn)動(dòng),形成視覺(jué)差效果,并且還帶有一些流光特效。2015-09-09Jquery 實(shí)現(xiàn)表格顏色交替變化鼠標(biāo)移過(guò)顏色變化實(shí)例
Jquery 實(shí)現(xiàn)表格顏色交替變化,點(diǎn)擊選中行,鼠標(biāo)移過(guò)顏色變化效果附演示代碼 ,喜歡的朋友可以參考下2013-08-08jquery實(shí)現(xiàn)淘寶詳情頁(yè)選擇套餐
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)淘寶詳情頁(yè)選擇套餐,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03jquery獲取當(dāng)前點(diǎn)擊的元素的五種方法介紹
我們可以使用$(this)方法獲取事件處理函數(shù)內(nèi)部的當(dāng)前元素,也可以使用e.target方法在外部獲取當(dāng)前元素,此外,我們還介紹了parent()方法和find()方法獲取當(dāng)前元素的父元素或子元素,以及closest()方法獲取當(dāng)前元素最近的祖先元素2023-08-08基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05JQuery實(shí)現(xiàn)左右滾動(dòng)菜單特效
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼,涉及jquery鼠標(biāo)事件相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery)擴(kuò)展jQuery系列之一 模擬alert,confirm(一)
很多人都為了使alert系統(tǒng)的調(diào)用函數(shù)在自己的控制范圍之內(nèi),都選擇了去封裝一個(gè)屬于自己的alert組件,現(xiàn)在我們就動(dòng)手實(shí)現(xiàn)一個(gè)這樣的小部件。2010-12-12