使用ajax上傳圖片，支持圖片即時瀏覽，支持js圖片壓縮后上傳給服務器

使用ajax上傳圖片，支持圖片即時瀏覽，支持js圖片壓縮后上傳給服務器

ajax上傳主要使用了 var reader = new FileReader() 此方法

js圖片壓縮主要是利用canvas進行的

源碼：

/** 
* js使用form上傳圖片，支持本地預覽選中的圖片,支持攜帶自定義參數
* @param {string}    params.previewImgId      預覽圖片控件id,可以預覽上傳圖片
* @param {string}    params.url               提交上傳的url
* @param {function}  params.success           上傳接口的回調函數
* @param {boolean}   params.params            上傳時提交的其它參數 有幾個傳幾個，系統會把 previewImgId  url success 這三個參數過濾后的其它參數傳給服務器
  使用示例：
  <img src="" id="yulan">
  <div onclick="shangchuan()">上傳</div>
 function shangchuan(){
        jsUploadImage({"diyparam":"1111","diyparam1":"222","previewImgId":"yulan","url":"user.php?act=photosave","success":function(data){
            console.log(data);
        }})
   };
*/
function jsUploadImage(params){   
    //初始化數據
    params.previewImgId = params.previewImgId || "";
    params.url = params.url || "";
    params.success = params.success || "";

    //創建file上傳控件 
    if(document.getElementById("imgFile")==null){
         var  inputEle=document.createElement("input"); //創建input  
         inputEle.id="imgFile";  
         inputEle.type="file"; 
         inputEle.accept="image/png,image/jpeg,image/jpeg,DCIM/*;capture=camera"; 
         inputEle.style="display:none;"; 
         inputEle.onchange = function(){
             showPhoto()
         };
         inputEle.multiple = false;
         document.body.appendChild(inputEle);          
    }
    var  imgFile = document.getElementById("imgFile"); 
    imgFile.click();
     
     
    //選中文件后的預覽圖片
    function showPhoto(){
        //文件對象  
        var file = document.getElementById("imgFile").files[0];
        
        //讀取后輟,判斷是否允許的文件
        var fileSuffix = file.name.substring(file.name.length-4);
        var allowFile = ".jpg|.png|.gif";
        if(allowFile.indexOf(fileSuffix.toLowerCase())==-1) {
            alert("請使用"+allowFile+"后輟的文件");
            return false;
        }
        
        //如果傳了顯示控件的id,顯示本地預覽
        var reader = new FileReader()
        reader.readAsDataURL(file);
        reader.onload = function(e){ 
            var imgBase64Data = e.target.result;
            
            //顯示預覽
           if("" !=  params.previewImgId)  document.getElementById(params.previewImgId).src = imgBase64Data;
           
           //如果不壓縮直接上傳 
           //savePhoto(imgBase64Data)
           
            //對圖片進行縮小處理,然后再上傳
            compressPhoto(imgBase64Data,1000,1000,function(imgBase64DataBack){                                
                //提交服務保存數據
                savePhoto(imgBase64DataBack)
            });  
            
        }        
        
    }
    
    //提交數據
    function savePhoto(base64Data){
        var formData = new FormData(); 
        
        //加入其它參數
        for(var key in params){
          if(key!="previewImgId" && key!="url" && key!="success" ){
              formData.append(key, params[key]);
          }
        }        
        //加入文件參數  利用base64
        formData.append("imgFile",encodeURIComponent(base64Data));
        //加入文件參數  file控件上傳 , 但這種試就不支持對圖片壓縮了，所以手機端不采用這種方式
        //formData.append('imgFile', file);
        
        //ajax上傳
        $.ajax({
            url:params.url,
            type: 'POST',
            cache: false,
            dataType:"json",
            data: formData,
            processData: false,
            contentType: false
        }).done(function(res) {
            if(params.success!=""){
                params.success(res);
            }
        }).fail(function(res) {
           alert("上傳失敗");
        });
    }

}
   
/** 
* js利用canvas對圖像進行壓縮處理
* @param {string}    imgBase64Data     圖像base64數據
* @param {string}    maxWidth          最大高度
* @param {function}  maxHeight         最大寬度
* @param {boolean}   fun               回調函數，參數為處理后的圖像數據
  使用示例：
  compressPhoto(imgBase64Data,maxWidth,maxHeight,function(imgBase64Data){
      //返回圖片數據后的處理
  })
*/
function compressPhoto(imgBase64Data,maxWidth,maxHeight,fun){
    var  img = new Image();

    // 縮放圖片需要的canvas
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    // base64地址圖片加載完畢后
    img.onload = function () {
        // 圖片原始尺寸
        var originWidth = this.width;
        var originHeight = this.height;            
        // 目標尺寸
        var targetWidth = originWidth, targetHeight = originHeight;
        // 圖片尺寸超過400x400的限制
        if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
                // 更寬，按照寬度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
                targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
        }

        // canvas對圖片進行縮放
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        // 清除畫布
        context.clearRect(0, 0, targetWidth, targetHeight);
        // 圖片壓縮
        context.drawImage(img, 0, 0, targetWidth, targetHeight);

        var base=canvas.toDataURL("image/jpeg",0.7);//canvas轉碼為base64                
        fun(base);//返回處理 
    };

    img.src = imgBase64Data;
}

使用示例：

<img src="" id="yulan">
<div onclick="shangchuan()">上傳</div>
<script type="text/javascript">
 function shangchuan(){
        jsUploadImage({"diyparam":"1111","diyparam1":"222","previewImgId":"yulan","url":"user.php?act=photosave","success":function(data){
            console.log(data);
        }})
   };
</script>

來源：jsfun.cn
http://www.jsfun.cn/#codecollect