js上傳本地圖片遇到的問題

1.改變頁面文件上傳默認的樣式

<input type="text" size="20" id="upfile" style="border:1px dotted #ccc">  
<input type="button" value="瀏覽" onclick="file.click()" style="border:1px solid #ccc;background:#fff">  
<input type="file" id="file" name="file" style="display:none" onchange="upfile.value=this.value">

2.校驗文件類型為圖片

/**
 * @description 校驗文件類型是否是圖片文件
 * @param file_id 圖片文件選擇對應的id
 */
function validateFileType(file_id) {
    try {
        var filePath = $("#"+file_id+"").val() ;    //獲取文件路徑
        var extStart = filePath.lastIndexOf(".") ;
        var ext = filePath.substring(extStart, filePath.length).toUpperCase() ;    //獲取文件拓展名
        //判斷文件是否是圖片文件
        if(ext !=".JPG" && ext != ".PNG" && ext != ".BMP" && ext != ".DIF" && ext != ".JPEG"){
            return false;
        }
        return true ;    
    } catch (e) {
        // TODO: handle exception
        alert('錯誤','校驗圖片類型異常','error') ;
    }
}

3.獲取文件大小

/**
 * @description 獲取圖片文件大小
 * @param file_id 圖片文件選擇對應的id
 * @returns fileSize 圖片文件大小（單位為byte）
 */
function getFileSize(file_id) {
    try {
        var fileInput = $("#"+file_id+"")[0] ;
        var fileSize = fileInput.files[0].size ;
        return fileSize ;        
    } catch (e) {
        // TODO: handle exception
        alert('錯誤','獲取文件大小異常','error') ;
    }
}

4.本地圖片預覽（於chrom瀏覽器而言）

　　chrome不能直接獲取所上傳圖片的本地路徑（實際獲取的是一個虛擬路徑），故不可以直接給img的 src 賦值來實現圖片預覽。通過FileReader來解決：

//查看圖片
$("#showPicture").click(function(){
   var reader = new FileReader();  
   reader.readAsDataURL($("#file")[0].files[0]);
   reader.onload = function(evt){
   　　var imgSrc = evt.target.result;
      $("#picture").attr("src", imgSrc) ;
   } ;
   return false ;
}) ;

5.關於圖片的等比例顯示

/**
 * @description 圖片大小自適應
 * @param maxWidth: 最寬限；  maxHeight： 最高限；  width： 圖寬；   height： 圖高
 * @returns param 
 */
function pictureFit_auto( maxWidth, maxHeight, width, height ){
    //圖片返回信息   
    var param = {top:0, left:0, width:width, height:height};  
    if(width > height){        //寬 > 高
        param.width = maxWidth-4 ;
        param.height = (param.width/width)*height ;
        param.left = 2;  
        param.top = Math.round((maxHeight - param.height) / 2);  
    }else{
        param.height = maxHeight-4 ;
        param.width = (param.height/height)*width
        param.left = Math.round((maxWidth - param.width) / 2);  
        param.top = 2;  
    }   
    return param;  
}