首頁 web前端 js教程 上傳的js驗證(圖片/檔案的副檔名)_ja​​vascript技巧

上傳的js驗證(圖片/檔案的副檔名)_ja​​vascript技巧

May 16, 2016 pm 05:35 PM
上傳 擴充名

js 驗證上傳圖片
複製程式碼 程式碼如下:


程式碼如下:
=new Image();//建立一個影像物件
varAllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部圖片格式類型
varFileObj,ImgFileSize,ImgWidth,ImgHeight ,FileExt,ErrMsg,FileMsg,IsImg//全域變數圖片相關屬性
//以下為限制變數
var AllowExt=""; //允許上傳的檔案類型ŀ為無限每個副檔名後邊要加上一個"|" 小寫字母表示
var AllowImgFileSize=100;//允許上傳圖片檔案的大小0為無限制單位:KB
var AllowImgWidth=385; //允許上傳的圖片的寬度Ɓ為無限制單位:px(像素)
var AllowImgHeight=441; //允許上傳的圖片的高度ƹ為無限單位:px(像素)
function CheckProperty(obj) //偵測影像屬性
{
FileObj=obj;
if(ImgObj.readyState!="complete")//如果映像是未載入完成進行循環偵測
{
setTimeout("CheckProperty(FileObj)",500) ;
return false;
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得圖片檔案的大小
ImgWidth=ImgObj.wid;// 取得圖片/取得圖片的寬度
ImgHeight=ImgObj.height; //取得圖片的高度
FileMsg="n圖片大小:" ImgWidth "*" ImgHeight "px";
FileMsg=FileMsg "n圖片檔案大小: " ImgFileSize "Kb";
FileMsg=FileMsg "n圖片檔案副檔名:" FileExt "n可以上傳! =ErrMsg "n請上傳寬度等於" AllowImgWidth "px的文件,目前圖片寬度為" ImgWidth "px";
if(AllowImgHeight!=ImgHeight)
ErrMsg=ErrMsg "n請上傳高度等於" AllowImgHeight " px的文件,目前圖片高度為" ImgHeight "px";
if(AllowImgFileSize!=0&&AllowImgFileSize上傳的js驗證(圖片/檔案的副檔名)_ja​​vascript技巧ErrMsg=ErrMsg "n請上傳小於" AllowImgFileSize "KKmize" "KB";
if(ErrMsg!="")
{
alert(ErrMsg);
return false;
}
else
return true;
}
else
return true;
}//end CheckProperty();
ImgObj.onerror=function(){ErrMsg='n圖片格式不正確或圖片已損壞!';}
function CheckExt(obj)
{
ErrMsg="";
FileMsg="";
IsImg=false;
if(obj.value=="")
return false;
FileExt=obj.value.substr( obj.value.lastIndexOf(".")).toLowerCase();
if(AllImgExt.indexOf(FileExt "|")!=-1)//如果圖片文件,則進行圖片資訊處理
{
IsImg=true;
FileObj=obj;
ImgObj.src=obj.value;
returnCheckProperty(obj);
}else
{
alert("該檔案類型不允許上傳。請上傳" AllImgExt "類型的文件,n當前文件類型為" FileExt);
obj.value='';
return false;
}
}

上傳的js驗證

下文將介紹怎麼控制一個上傳檔案的副檔名。 🎜>
程式碼如下: function check2() { var file = document.getElementsByName("file").value; file=="")
{
alert("請選取檔案");
return false;
}
var strTemp = file.split(".");
var strCheck = strTemp[strTemp.length-1];
if(strCheck.toUpperCase()=='JPG')
{
return true;
}else
{
alert('上傳文件類型不對!');
return false;
}
}


表單:



複製程式碼

程式碼如下:

要注意的是, document.getElementsByName("file").value取得的是所上傳的檔案的絕對路徑,故使用字串分割法將檔案的拓展名分割出來,然後再進行判斷。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在 Windows 11 上開啟 Webp 映像的 4 種快速方法 在 Windows 11 上開啟 Webp 映像的 4 種快速方法 Sep 30, 2023 pm 02:13 PM

WebP或WebPicture是由Google開發的一種現代圖像格式,最近已被業界廣泛使用。這些圖像比JPG,JPEG或PNG檔案小,從而提高了頁面載入速度,並從SEO的角度來看使它們很有價值。但是如何在Windows11中開啟WebP檔案呢?鑑於它是一種相對較新的圖像格式,於2010年<>月首次宣布,相容性必然是一個問題。一些照片編輯軟體仍然不支援檔案副檔名。但事情變化很快! Windows11是否支援WebP?雖然WebP圖像檔案與先前的Windows11不相容,但M

如何解決 Windows 11 中的檔案名稱或副檔名過長的問題? 如何解決 Windows 11 中的檔案名稱或副檔名過長的問題? Apr 22, 2023 pm 04:37 PM

您在傳輸文件時是否遇到任何問題,並且禁止您這樣做?好吧,許多Windows用戶最近報告說,他們在將檔案複製並貼上到資料夾時遇到了問題,其中拋出了一個錯誤,提示「目標資料夾的檔案名稱太長」。此外,其他一些Windows用戶在打開任何文件時表示失望,並說“文件名或擴展名太長”,他們無法打開文件。這不允許他們將文件傳輸到任何其他資料夾,這讓用戶感到失望。在分析問題時,我們提出了一系列解決方案,可能有助於緩解問題,使用者可以輕鬆傳輸檔案。如果您也遇到類似情況,請參閱此貼文以了解更多資訊。來源:https

如何在 Windows 11、10 中開啟沒有副檔名的文件 如何在 Windows 11、10 中開啟沒有副檔名的文件 Apr 14, 2023 pm 05:52 PM

除非你知道它的副檔名,否則擁有一個檔案並不代表什麼。有些檔案沒有副檔名。大多數情況下,擴充功能可能只是被隱藏了,您可以使用第1節中列出的方法從Windows檔案總管本身輕鬆找到它。即使該檔案實際上沒有擴展名,也可以按照第2節中列出的方法輕鬆找到。最後,當您知道檔案的副檔名後,您可以按照第3節中的步驟找到合適的應用程式來開啟您的檔案。因此,本文是您所有檔案副檔名問題的完整解決方案。希望你喜歡閱讀!第1節:如何確定檔案是否有副檔名開啟沒有副檔名的檔案的第一步是確保該檔案確實沒有副檔名。這

如何在FastAPI中實現檔案上傳和處理 如何在FastAPI中實現檔案上傳和處理 Jul 28, 2023 pm 03:01 PM

如何在FastAPI中實現檔案上傳和處理FastAPI是一個現代化的高效能Web框架,簡單易用且功能強大,它提供了原生支援檔案上傳和處理的功能。在本文中,我們將學習如何在FastAPI框架中實作檔案上傳和處理的功能,並提供程式碼範例來說明具體的實作步驟。首先,我們需要導入需要的函式庫和模組:fromfastapiimportFastAPI,UploadF

如何在QQ音樂上傳歌詞 如何在QQ音樂上傳歌詞 Feb 23, 2024 pm 11:45 PM

隨著數位時代的到來,音樂平台成為人們獲取音樂的主要途徑之一。然而,有時候我們在聽歌的時候,發現沒有歌詞是一件十分困擾的事。許多人都希望在聽歌的時候能夠展現歌詞,以便更好地理解歌曲的內容和情感。而QQ音樂作為國內最大的音樂平台之一,也為用戶提供了上傳歌詞的功能,使得用戶可以更好地享受音樂的同時,感受到歌曲的內涵。以下將介紹一下在QQ音樂上如何上傳歌詞。首先

酷狗上傳自己的音樂的簡單步驟 酷狗上傳自己的音樂的簡單步驟 Mar 25, 2024 pm 10:56 PM

1.打開酷狗音樂,點選個人頭像。 2、點選右上角設定的圖示。 3.點選【上傳音樂作品】。 4.點選【上傳作品】。 5.選擇歌曲,然後點選【下一步】。 6.最後點選【上傳】即可。

Win10電腦上傳速度慢怎麼解決 Win10電腦上傳速度慢怎麼解決 Jul 01, 2023 am 11:25 AM

  Win10電腦上傳速度慢怎麼解決?我們在使用電腦的時候可能會覺得自己電腦上傳檔案的速度非常的慢,那麼這是什麼情況呢?其實這是因為電腦預設的上傳速度為20%,所以才導致上傳速度非常慢,很多小夥伴不知道怎麼詳細操作,小編下面整理了win11格式化c碟操作步驟,如果你有興趣的話,跟著小編一起往下看看吧!  Win10上傳速度慢的解決方法  1、按下win+R調出運行,輸入gpedit.msc,回車。  2、選擇管理模板,點選網路--Qos封包計畫程序,雙擊限制可保留頻寬。  3、選擇已啟用,將帶

不一致的檔案格式與副檔名如何處理 不一致的檔案格式與副檔名如何處理 Feb 19, 2024 pm 04:47 PM

檔案格式和副檔名不符怎麼解決在電腦使用過程中,常常會遇到檔案格式和副檔名不符的情況。當我們嘗試開啟一個檔案時,系統可能會提示「無法開啟檔案」或「檔案格式不受支援」。這種情況可能會讓人感到困惑和失望,但其實解決這個問題並不難,只需要一些簡單的步驟就可以解決。首先,我們需要了解檔案格式和副檔名的含義。文件格式指的是文件的儲存方式和編碼方式,例如文字文件是以

See all articles