當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS验证图片格式和大小并预览
生活随笔
收集整理的這篇文章主要介紹了
JS验证图片格式和大小并预览
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用于上傳圖片的js驗證：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>圖片效驗</title> </head> <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script> <script type="text/javascript">/**圖片驗證*/function photoCheck(obj){var ff = $("#photoSrc").val();if(ff == null || ff == ""){alert("請選擇文件"); return;}else if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(ff)){alert("圖片類型必須是.gif,jpeg,jpg,png中的一種");return;}photo_flag = true;//設置限制圖像的大小為10MB，這里你可以自己設置var fSize = 1024 * 1024 *10;//限制圖片寬高var fHeight = 3000;var fWidth = 3000;var fileType;var fileSize;var filePath;var img = new Image();//顯示圖片if (obj.files) {//用來把文件讀入內存，并且讀取文件中的數據，要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 實現了 FileReader 接口。var reader = new FileReader();//獲取文件的對像var thisFile = obj.files[0];//獲取上傳文件的類型，一般來說，如果類型是image/jpeg,.jpg,.gif等等圖片格式的話就是合理的 fileType = thisFile.type;//獲取當前上傳的文件的大小 fileSize=thisFile.size;/*readAsDataURL：該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URI，Data URI是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件*/reader.readAsDataURL(thisFile);//文件讀取成功完成時觸發 reader.onloadend = function(event){// 圖像的路徑 img.src = event.target.result;// 圖片加載完畢后 img.onload = function(event) {//效驗圖片規格 specification(img);filePath = this.src;if(photo_flag){//設置圖片為當前上傳的圖片路徑 $("#imgShow").attr("src", filePath);}else{//否則設置默認的圖片 $("#imgShow").attr("src", "default.jpg");}}}}else{// 如果是ie瀏覽器//選擇當前全部文本內容 obj.select();/*為選擇的內容創建一個Range對象，在.text轉換成文本什么是Range？https://my.oschina.net/122612475/blog/286302所謂"Range"，是指HTML文檔中任意一段內容。一個Range的起始點和結束點位置任意，甚至起始點和結束點可以是一樣的（也就是空Range）。最常見的Range是用戶文本選擇范圍(user text selection)。當用戶選擇了頁面上的某一段文字后，你就可以把這個選擇轉為Range。當然，你也可以直接用程序定義Range*/var path = document.selection.createRange().text;img.src = path; //效驗圖片規格 specification(img);//取出文件后綴var fileType = path.substring(path.length-4,path.length);if(img.readyState == "complete") {//圖片加載完畢,獲取圖片的大小 fileSize = img.fileSize;}else{//當的該對象的 load state 改變時，會觸發此事件 img.onreadystatechange = function(){// 當圖片load完畢if(img.readyState=='complete'){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" &&fileType != ".png" && fileType != ".PNG" && fileType != "image/png" &&fileType != ".gif" && fileType != ".GIF" && fileType != "image/gif" ){alert("圖片類型必須是.gif,jpeg,jpg,png中的一種");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");}// 匿名函數:效驗圖片規格var specification = function(image){if(image.width >= fWidth || image.height >= fHeight){alert("*提示：文件大小不對。您只能上傳小于等于"+fWidth+"*"+fHeight+"尺寸的圖片");$("#imgShow").attr("src", "default.jpg");return;}}}</script> <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路徑會發現發現該方法將文件讀取為一段以 data: 開頭的字符串，像上面描述的一樣，正是FileReader中readAsDataURL的作用，下面介紹下FileReader| abort | none | 中斷讀取 |
| readAsBinaryString | file | 將文件讀取為二進制碼 |
| readAsDataURL | file | 將文件讀取為 DataURL |
| readAsText | file, [encoding] | 將文件讀取為文本 |
readAsBinaryString： 它將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
readAsDataURL： 這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URI，Data URI是一種將小文件直接嵌入文檔的方
案。這里的小文件通常是指圖像與 html 等格式的文件FileReader還有以下的事件
| onabort | 中斷時觸發 |
| onerror | 出錯時觸發 |
| onload | 文件讀取成功完成時觸發 |
| onloadend | 讀取完成觸發，無論成功或失敗 |
| onloadstart | 讀取開始時觸發 |
| onprogress | 讀取中 |
本文參考：喜youngyoung
總結
以上是生活随笔為你收集整理的JS验证图片格式和大小并预览的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工具开发
- 下一篇： MySQL在线DDL工具pt-osc