欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

前言：我們在做網頁時經常會需要有上傳圖片的需求，可能是選擇圖片或者拍照上傳，如果簡單的使用這種方式雖然也能實現功能，但用戶體驗上可能會差了一些js實現選中的多張圖片被下載，所以本文記錄了使用css+js實現圖片選中后的預覽及壓縮上傳功能，部分帶來來源于網絡，此處做了記錄整理。

效果預覽：

1.創建index.html

    
        
        
        
        
        <script type='text/javascript' src='index.js' charset='utf-8'></script>
    
    
         

            

                
身份證
                

                    

                        
                        

                            
                            
身份證正面照
                        
                        
                    
                    

                        

                        

                            
                            
身份證反面照
                        
                        
                    
                
            
            

                提交
            
         
    

2.創建index.css

body{
    margin: 0
}
.content{
    padding:0.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #999 solid
}
.label{
    width:5rem;
}
.img-area{

    flex:1
}
.container{
    background-color:#e7e7e7;
    position: relative;
}
.container div{
    text-align: center;
    padding:0.5rem 0
}
.container input{
    opacity:0;
    filter:alpha(opacity=0);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.container p{
    font-size: 0.9rem;
    color:#999
}
.btn{
    background-color: #4363ab;
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;

    width:80%;
    border-radius: 0.2rem;
    margin: 2rem auto;
    font-weight: 600;
    font-size: 1.2rem
}

3.創建index.js

window.onload=function(){
    document.getElementById("id-face").addEventListener("change", function(){       
        onFileChange(this,"face-result","face-empty-result")
    });
    document.getElementById("id-back").addEventListener("change", function(){       
        onFileChange(this,"back-result","back-empty-result")
    });
    document.getElementsByClassName("btn")[0].addEventListener("click", function(){       
        submit();
    });
};
/**
 * 選中圖片時的處理
 * @param {*} fileObj input file元素
 * @param {*} el //選中后用于顯示圖片的元素ID
 * @param {*} btnel //未選中圖片時顯示的按鈕區域ID
 */
function onFileChange(fileObj,el,btnel){
    var windowURL = window.URL || window.webkitURL;
    var dataURL;
    var imgObj = document.getElementById(el);

    document.getElementById(btnel).style.display="none";
    imgObj.style.display="block";
    if (fileObj && fileObj.files && fileObj.files[0]) {
        dataURL = windowURL.createObjectURL(fileObj.files[0]);
        imgObj.src=dataURL;
    } else {
        dataURL = fileObj.value;
        imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
    }
}
/**
 * 將圖片壓縮后返回base64格式的數據
 * @param {*} image img元素
 * @param {*} width 壓縮后圖片寬度
 * @param {*} height 壓縮后圖片高度
 * @param {*} qua //圖片質量1-100
 */
function compressImageTobase64(image,width,height,qua){
    var quality = qua ? qua / 100 : 0.8;
    var canvas = document.createElement("canvas"),     
        ctx = canvas.getContext('2d');     
    var w = image.naturalWidth,     
        h = image.naturalHeight;     
    canvas.width = width||w;     
    canvas.height = height||h;     
    ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);
    var data = canvas.toDataURL("image/jpeg", quality);     
    return data;

}
//提交
function submit(){
    //1、form提交
    //document.getElementById("mainForm").submit();
    //2、壓縮后ajax提交
    var face_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);
    var back_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);
    var formData = new FormData();  
    formData.append("face",face_data);
    formData.append("back",back_data);
    //需引入jQuery
    $.ajax({
        url:"/地址",
        type: 'POST',
        cache: false,
        data: formData,
        timeout:180000,
        processData: false,
        contentType: false,
        success:function(r){
        },
        error:function(r){  
        }
   });
}

源碼： 地址

總結

以上所述是小編給大家介紹的html+css+js 實現拍照預覽上傳圖片功能，希望對大家有所幫助，如果大家有任何疑問請給我留言js實現選中的多張圖片被下載，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！