實(shí)例如下:
function photoCheck(obj){ var ff = $("#photoSrc").val(); if(ff == null || ff == ""){ return; } photo_flag = true; var fSize = 50.9 * 1024; var fileType; var fileSize; var filePath; if (obj.files) { // webkit, mozilla... (jq:$.support.boxModel) // ff & chrome var reader = new FileReader(); var thisFile = obj.files[0]; var isFirefox=navigator.userAgent.indexOf("Firefox"); //ff 下獲取圖片大小 fileType = thisFile.type; fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize; reader.readAsDataURL(thisFile); reader.onloadend = function(event) { var imgObj = new Image(); imgObj.src = event.target.result; // image src imgObj.onload = function(event) { filePath = this.src; if(photo_flag){ $("#imgShow").attr("src", filePath); } else { $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); } } } } else { ///////////////////////////////////////////// ie obj.select(); var path = document.selection.createRange().text; var img = new Image(); img.src = path; var fileType = path.substring(path.length-4,path.length); if(img.readyState == "complete") { fileSize = img.fileSize; } else { img.onreadystatechange=function(){ if(img.readyState=='complete'){//當(dāng)圖片load完畢 fileSize = img.fileSize; if(fileSize > fSize){ setMsg('photoSrc_msg', '圖片太大了!', 'reg_wrong'); photo_flag = false; $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); return; } } } } if (path) { filePath = path; } } if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){//image/jpeg setMsg('photoSrc_msg', '圖片格式錯(cuò)誤!', 'reg_wrong'); photo_flag = false; $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); return; } if(fileSize > fSize){ setMsg('photoSrc_msg', '圖片太大了!', 'reg_wrong'); photo_flag = false; $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); return; } setMsg('photoSrc_msg', '正確', 'reg_ok'); if(photo_flag){ $("#imgShow").attr("src", filePath); } else { $("#imgShow").attr("src", "<%=request.getContextPath()%>/userTx/default.jpg"); } }用于上傳圖片的驗(yàn)證
下面講解上面的代碼:
下面是一個(gè)用戶上傳頭像的格式和大小的驗(yàn)證的方法,在用戶注冊(cè)的時(shí)候要求用戶上傳頭像的時(shí)候進(jìn)行的驗(yàn)證。在方法中我給予了最詳細(xì)的注釋
<script type="text/javascript">function photoCheck(obj){ var ff = $("#photoSrc").val(); //獲取文件的路徑 if(ff == null || ff == ""){ return; } photo_flag = true; var fSize = 50.9 * 1024;//設(shè)置圖像的大小為50kb,這里你可以自己設(shè)置 var fileType; var fileSize; var filePath; if (obj.files) { // obj.files 是chrome,firefox等瀏覽器的對(duì)戲那個(gè),如果是ie的話他的值就是false var reader = new FileReader();//這個(gè)FileReader在稍后會(huì)進(jìn)行較詳細(xì)的描述,要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 實(shí)現(xiàn)了 FileReader 接口。 var thisFile = obj.files[0];//獲取文件的對(duì)像 var isFirefox=navigator.userAgent.indexOf("Firefox"); //注意這個(gè)是判斷當(dāng)前用戶使用的瀏覽器是哪一種,如果返回的值是大于0的話,那么表示瀏覽器是當(dāng)前瀏覽器,例如isFirefox>0上訴的就是firefox fileType = thisFile.type;//獲取文件的類型,一般來(lái)說(shuō),如果類型是image/jpeg,.jpg,.gif等等圖片格式的話就是合理的 fileSize=thisFile.size;//獲取當(dāng)前上傳的文件的大小 fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize; //如果是firefox,調(diào)用 reader.readAsDataURL(thisFile); // readAsDataURL:該方法將文件讀取為一段以 data: 開頭的字符串,這段字符串的實(shí)質(zhì)就是 Data URI,Data URI是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件 reader.onloadend = function(event) { //文件讀取成功完成時(shí)觸發(fā) var imgObj = new Image(); imgObj.src = event.target.result; // 圖像的路徑 imgObj.onload = function(event) { // 圖片加載完畢后 filePath = this.src; if(photo_flag){ $("#imgShow").attr("src", filePath);//設(shè)置圖片為當(dāng)前上傳的圖片路徑 } else { $("#imgShow").attr("src", "default.jpg");//否則設(shè)置默認(rèn)的圖片 } } } } else { //如果是ie obj.select(); var path = document.selection.createRange().text;//ie下返回上傳時(shí)選定的文件路徑 var img = new Image(); img.src = path; var fileType = path.substring(path.length-4,path.length); if(img.readyState == "complete") {//圖片加載完畢,獲取圖片的大小 fileSize = img.fileSize; } else { img.onreadystatechange=function(){ if(img.readyState=='complete'){//當(dāng)圖片load完畢 fileSize = img.fileSize; if(fileSize > fSize){ photo_flag = false; $("#imgShow").attr("src", "default.jpg"); return; } } } } if (path) { filePath = path; } } //圖片格式的判斷 if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){ photo_flag = false; $("#imgShow").attr("src", "default.jpg"); return; } if(fileSize > fSize){ alert("圖片太大了!"); photo_flag = false; $("#imgShow").attr("src", "default.jpg"); return; } if(photo_flag){ $("#imgShow").attr("src", filePath); } else { $("#imgShow").attr("src", "default.jpg"); }}</script></head><body><input type="file" name="usertx" id="photoSrc" value="文件上傳" onchange="photoCheck(this)"/><div>//顯示圖片的div<img src="" id="imgShow" style="width:100px;height:100px"></img></div></body></html>如果是在chrome下上傳的頭像的話,我們查看的起src路徑會(huì)發(fā)現(xiàn)
發(fā)現(xiàn)該方法將文件讀取為一段以 data: 開頭的字符串,像上面描述的一樣,正是FileReader中readAsDataURL的作用,下面介紹下FileReader
方法名參數(shù)描述
abort
none
中斷讀取
readAsBinaryString
file
將文件讀取為二進(jìn)制碼
readAsDataURL
file
將文件讀取為 DataURL
readAsText
file, [encoding]
將文件讀取為文本
readAsText: 該方法有兩個(gè)參數(shù),其中第二個(gè)參數(shù)是文本的編碼方式,默認(rèn)值為 UTF-8。這個(gè)方法非常容易理解,將文件以文本方式讀取,讀取的結(jié)果即是這個(gè)文本文件中的內(nèi)容。readAsBinaryString: 它將文件讀取為二進(jìn)制字符串,通常我們將它傳送到后端,后端可以通過這段字符串存儲(chǔ)文件。readAsDataURL: 這是例子程序中用到的方法,該方法將文件讀取為一段以 data: 開頭的字符串,這段字符串的實(shí)質(zhì)就是 Data URI,Data URI是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件
FileReader還有以下的事件
事件描述
onabort
中斷時(shí)觸發(fā)
onerror
出錯(cuò)時(shí)觸發(fā)
onload
文件讀取成功完成時(shí)觸發(fā)
onloadend
讀取完成觸發(fā),無(wú)論成功或失敗
onloadstart
讀取開始時(shí)觸發(fā)
onprogress
讀取中
文件一旦開始讀取,無(wú)論成功或失敗,實(shí)例的 result 屬性都會(huì)被填充。如果讀取失敗,則 result 的值為 null ,否則即是讀取的結(jié)果,絕大多數(shù)的程序都會(huì)在成功讀取文件的時(shí)候,抓取這個(gè)值。
以上就是小編為大家?guī)?lái)的JS驗(yàn)證圖片格式和大小并預(yù)覽的簡(jiǎn)單實(shí)例全部?jī)?nèi)容了,希望大家多多支持武林網(wǎng)~
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注