after uploading the avatar, the picture previewed on the right and the picture uploaded on the left Synchronize

    var input = document.getElementsByClassName("file_input")[0];      
var result;      
var dataArr = []; // (base64)    
var fd;  //FormData      
var oSelect = document.getElementsByClassName("select");    
// var oAdd = document.getElementById("add");    
// var oSubmit = document.getElementById("submit");    
var oInput = document.getElementsByClassName("file_input")[0];  
// var ZAfterapply = document.getElementsByClassName("Z-Afterapply-UTu-li-div")[0];

if(typeof FileReader==="undefined"){      
    alert(" FileReader");      
    input.setAttribute("disabled","disabled");      
}else{      
    input.addEventListener("change",readFile,false);      
}//handler  
    
  
      
function readFile(){     
    fd = new FormData();      
    var iLen = this.files.length;    
    var index = 0;    
    for(var i=0;i<iLen;iPP){    
        if (!input["value"].match(/.jpg|.png|.jpeg|.bmp/i)){//      
            return alert("");      
        }    
        var reader = new FileReader();    
        reader.index = i;      
        fd.append(i,this.files[i]);    
        reader.readAsDataURL(this.files[i]);  //base64      
        reader.fileName = this.files[i].name;    


        reader.onload = function(e){     
            var imgMsg = {      
                name : this.fileName,//      
                base64 : this.result   //reader.readAsDataURLbase64reader.result      
            }     
            dataArr.push(imgMsg);      
            result = "<div class="delete">X</div><div class="resul"><img id="imga" src=""+this.result+"" alt=""/></div>";     
            var div = document.createElement("div");    
            div.innerHTML = result;      
            div["className"] = "floa";    
            div["index"] = index;      
            document.getElementsByClassName("Z-Afterapply-UTu-li-div")[0].appendChild(div);  //dom     
            var img = div.getElementsByClassName("img")[0];    
            img.onload = function(){
                var nowHeight = ReSizePic(this); //      
                // this.parentNode.style.display = "block";      
                var oParent = this.parentNode;      
                if(nowHeight){      
                    oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + "px";      
                }      
            }     
              
            $(".float").mouseover(function(){
                $(this).children(".delete").show();
            })
            $(".float").mouseout(function(){
                $(this).children(".delete").hide();
            })
            // deletes.onclick = function(){    
            //     this.remove();                  //     
            //     // delete dataArr[this.index];  // dataArr    
            $(".delete").click(function(){
                $(this).parents(".float").remove();
            }) 
            indexPP;    
        }      
    }      
}      
        
      
function send(){     
    var submitArr = [];    
    for (var i = 0; i < dataArr.length; iPP) {    
        if (dataArr[i]) {    
            submitArr.push(dataArr[i]);    
        }    
    }        
}      
           
$(".select").click(function(){
    oInput.value = "";   // oInputchange    
    //    
    $(".resul").remove();    
    dataArr = [];     
    index = 0;            
    oInput.click(); 
})   
              
function ReSizePic(ThisPic) {      
    var RePicWidth = 200; //      
      
    var TrueWidth = ThisPic.width; //      
    var TrueHeight = ThisPic.height; //      
          
    if(TrueWidth>TrueHeight){      
        //      
        var reWidth = RePicWidth;      
        ThisPic.width = reWidth;      
        //      
        var nowHeight = TrueHeight * (reWidth/TrueWidth);      
        return nowHeight;  //      
    }else{      
        //      
        var reHeight = RePicWidth;      
        ThisPic.height = reHeight;      
    }      
}