用於上傳圖片的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] | 將文件讀取為文本 |
readAsText： 該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。
readAsBinaryString： 它將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
readAsDataURL： 這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URI，Data URI是一種將小文件直接嵌入文檔的方
案。這里的小文件通常是指圖像與 html 等格式的文件 FileReader還有以下的事件
| 事件 | 描述 |
|---|---|
| onabort | 中斷時觸發 |
| onerror | 出錯時觸發 |
| onload | 文件讀取成功完成時觸發 |
| onloadend | 讀取完成觸發，無論成功或失敗 |
| onloadstart | 讀取開始時觸發 |
| onprogress | 讀取中 |
文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。
本文參考：喜youngyoung