使用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