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;
}