js驗證圖片格式和大小並預覽

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'){//當圖片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', '圖片格式錯誤！', '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");
        }
    } 

用於上傳圖片的驗證

西面講解上面的代碼：

下面是一個用戶上傳頭像的格式和大小的驗證的方法，在用戶注冊的時候要求用戶上傳頭像的時候進行的驗證。在方法中我給予了最詳細的注釋
<script type="text/javascript">
function photoCheck(obj){
　　　var ff = $("#photoSrc").val();
　　　//獲取文件的路徑
    if(ff == null || ff == ""){
        return;
    }
    photo_flag = true;
    var fSize = 50.9 * 1024;//設置圖像的大小為50kb，這里你可以自己設置
    var fileType;
    var fileSize;
    var filePath;
　　　if (obj.files) { 
　　　// obj.files 是chrome，firefox等瀏覽器的對戲那個，如果是ie的話他的值就是false
        var reader = new FileReader();
//這個FileReader在稍后會進行較詳細的描述，要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 實現了 FileReader 接口。
        var thisFile = obj.files[0];//獲取文件的對像
        var isFirefox=navigator.userAgent.indexOf("Firefox"); 
　　//注意這個是判斷當前用戶使用的瀏覽器是哪一種，如果返回的值是大於0的話,那么表示瀏覽器是當前瀏覽器，例如isFirefox>0上訴的就是firefox
   
        fileType = thisFile.type;
//獲取文件的類型，一般來說，如果類型是image/jpeg,.jpg,.gif等等圖片格式的話就是合理的
        fileSize=thisFile.size;//獲取當前上傳的文件的大小
        fileSize = isFirefox > 0 ?  thisFile.size : thisFile.fileSize; 
//如果是firefox,調用
        reader.readAsDataURL(thisFile);
       // readAsDataURL：該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URI，Data URI是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件
        reader.onloadend = function(event) {
　　//文件讀取成功完成時觸發
            
            var imgObj = new Image();
            imgObj.src = event.target.result; // 圖像的路徑           
　　 imgObj.onload = function(event) {
     // 圖片加載完畢后
                filePath = this.src;
               
                if(photo_flag){
                    $("#imgShow").attr("src", filePath);
//設置圖片為當前上傳的圖片路徑
                } else {
                    $("#imgShow").attr("src", "default.jpg");
//否則設置默認的圖片
                }
            }
        } 
　　　} else { //如果是ie
　　　      obj.select();
        var path = document.selection.createRange().text;
//ie下返回上傳時選定的文件路徑

        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'){
//當圖片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路徑會發現

發現該方法將文件讀取為一段以 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 ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。