手机拍照或选择照片上传html5代码

1、certNumberPhoto.html

<link type="text/css" rel="stylesheet" href="../css/certNumberPhoto.css" />
<script type="text/javascript" src="../js/certNumberPhoto.js"></script>
<div id="certNumberPhoto" class="certNumberPhoto">
    <li style="height: 148px;"><span class="w50 fl">身份证证件照</span>
    <div class="fl pz1"><a class="bm_pz"><img id="certNPZimgInfo" src="../image/sfz_zm.png" width="30" height="22" class="mt20" /><br />正面照片</a>
    <div class = "certNPwrapper">
         <input class="certNPuploadPhotoInput" type="file" accept="image/*" id="certNPZimg">
         <button class="certNPuploadPhotoBtn">上传照片 </button >
    </div></div>
    <div class="fl pz2 ml10"><a class="bm_pz"><img id="certNPFimgInfo" src="../image/sfz_bm.png" width="30" height="22" class="mt20" /><br />反面照片</a>
    <div class = "certNPwrapper">
         <input class="certNPuploadPhotoInput" type="file" accept="image/*" id="certNPFimg">
         <button class="certNPuploadPhotoBtn">上传照片 </button >
    </div></div>
    </li>
</div>

2、certNumberPhoto.css

.certNPwrapper {
    margin: 10px auto;
    position: relative;
}

.certNPuploadPhotoInput {
    width: 100px;
    height: 30px;
}

.certNPuploadPhotoBtn {
    position: absolute;
    cursor: pointer;
    pointer-events: none;
    width: 100px;
    height: 30px;
    left: 0;
    top: 0;
}

3、certNumberPhoto.js

var CertNumberPhoto = function(){
    var temp = this;
    this.obj = null;
    
    this.init = function(obj){
        temp.bindFunction();
        temp.obj = obj;
    };
    
    this.bindFunction = function(){
        temp.$('certNPZimg').addEventListener('change', function () {
            temp.obj.booleanCertNPZimg = false;
            temp.certNPimgInfo(this, 'certNPZimgInfo');
        }, false);
        
        temp.$('certNPFimg').addEventListener('change', function () {
            temp.obj.booleanCertNPFimg = false;
            temp.certNPimgInfo(this, 'certNPFimgInfo');
        }, false);
    };
    
    this.certNPimgInfo = function(certNPimgThis, certNPimgInfo){
        var reader = new FileReader();

        reader.onload = function (e) {
            var compressImg = temp.compress( this.result, fileSize, certNPimgInfo);
        };

        reader.readAsDataURL(certNPimgThis.files[0]);

        result1 = certNPimgThis.files[0].size + ' Bytes';

        var fileSize = Math.round(certNPimgThis.files[0].size/1024/1024) ;
    };
    
    this.compress = function (res, fileSize, certNPimgInfo) {
        var img = new Image(),
            maxW = 200; //设置最大宽度

        img.onload = function () {
            debugger;
            var cvs = document.createElement( 'canvas'),
                ctx = cvs.getContext( '2d');

            result2 = img.width;
            result3 = img.height;

            if(img.width > maxW) {
                img.height *= maxW / img.width;
                img.width = maxW;
            }

            cvs.width = img.width;
            cvs.height = img.height;

            result4 = cvs.width;
            result5 = cvs.height;

            ctx.clearRect(0, 0, cvs.width, cvs.height);
            ctx.drawImage(img, 0, 0, img.width, img.height);

            var compressRate = temp.getCompressRate(1,fileSize);

            var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);
            temp.$(certNPimgInfo).setAttribute('src',dataUrl);
            temp.$(certNPimgInfo).style.width = '129px';
            temp.$(certNPimgInfo).style.height = '94px'; 
            temp.$(certNPimgInfo).style.height = '94px'; 
            temp.removeClass(temp.$(certNPimgInfo),'mt20');
            
            if(certNPimgInfo == 'certNPZimgInfo'){
                temp.obj.booleanCertNPZimg = true;
            }else if(certNPimgInfo == 'certNPFimgInfo'){
                temp.obj.booleanCertNPFimg = true;
            }
            else{
                util.msgAlert('拍照内部程序出错,请联系管理员检查!');
                return false;
            }
        };

        img.src = res;
    };
    
    this.removeClass = function(obj, cls) {  
        if (temp.hasClass(obj, cls)) {  
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
            obj.className = obj.className.replace(reg, ' ');  
        }  
    };

    this.hasClass = function(obj, cls) {  
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
    };

    this.getCompressRate = function(allowMaxSize,fileSize){ //计算压缩比率，size单位为MB
        var compressRate = 1;

        if(fileSize/allowMaxSize > 4){
           compressRate = 0.5;
        } else if(fileSize/allowMaxSize >3){
           compressRate = 0.6;
        } else if(fileSize/allowMaxSize >2){
           compressRate = 0.7;
        } else if(fileSize > allowMaxSize){
           compressRate = 0.8;
        } else{
           compressRate = 0.9;
        }

        result6 = compressRate;

        return compressRate;
    };
    
    this.$ = function(id){
        if(typeof id === 'string' && id.constructor === String){
            return document.getElementById(id);
        }else{
            return;
        }
    };
};