鍍金池/ 問答/HTML/ 怎么解決這個(gè)上傳頭像問題??

怎么解決這個(gè)上傳頭像問題??

上傳頭像之后,在右邊預(yù)覽的圖片和和左邊上傳的圖片同步
圖片描述

    var input = document.getElementsByClassName("file_input")[0];      
var result;      
var dataArr = []; // 儲(chǔ)存所選圖片的結(jié)果(文件名和base64數(shù)據(jù))    
var fd;  //FormData方式發(fā)送請(qǐng)求      
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;i++){    
        if (!input['value'].match(/.jpg|.png|.jpeg|.bmp/i)){  //判斷上傳文件格式      
            return alert("上傳的圖片格式不正確,請(qǐng)重新選擇");      
        }    
        var reader = new FileReader();    
        reader.index = i;      
        fd.append(i,this.files[i]);    
        reader.readAsDataURL(this.files[i]);  //轉(zhuǎn)成base64      
        reader.fileName = this.files[i].name;    


        reader.onload = function(e){     
            var imgMsg = {      
                name : this.fileName,//獲取文件名      
                base64 : this.result   //reader.readAsDataURL方法執(zhí)行完后,base64數(shù)據(jù)儲(chǔ)存在reader.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); //設(shè)置圖片大小      
                // 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對(duì)應(yīng)的數(shù)據(jù)    
            $(".delete").click(function(){
                $(this).parents('.float').remove();
            }) 
            index++;    
        }      
    }      
}      
        
      
function send(){     
    var submitArr = [];    
    for (var i = 0; i < dataArr.length; i++) {    
        if (dataArr[i]) {    
            submitArr.push(dataArr[i]);    
        }    
    }        
}      
           
$(".select").click(function(){
    oInput.value = "";   // 先將oInput值清空,否則選擇圖片與上次相同時(shí)change事件不會(huì)觸發(fā)    
    //清空已選圖片    
    $('.resul').remove();    
    dataArr = [];     
    index = 0;            
    oInput.click(); 
})   
              
function ReSizePic(ThisPic) {      
    var RePicWidth = 200; //這里修改為您想顯示的寬度值      
      
    var TrueWidth = ThisPic.width; //圖片實(shí)際寬度      
    var TrueHeight = ThisPic.height; //圖片實(shí)際高度      
          
    if(TrueWidth>TrueHeight){      
        //寬大于高      
        var reWidth = RePicWidth;      
        ThisPic.width = reWidth;      
        //垂直居中      
        var nowHeight = TrueHeight * (reWidth/TrueWidth);      
        return nowHeight;  //將圖片修改后的高度返回,供垂直居中用      
    }else{      
        //寬小于高      
        var reHeight = RePicWidth;      
        ThisPic.height = reHeight;      
    }      
}    
     
回答
編輯回答
我不懂

jq的attr賦值

2018年6月17日 09:28
編輯回答
瘋子范

對(duì)右邊img標(biāo)簽的src屬性重新賦值 賦值為filereader讀出之后的url

2018年5月27日 03:41
編輯回答
拮據(jù)

看代碼已經(jīng)讀取到所選定文件的base64, 可以直接賦值給其他 img 標(biāo)簽的 src

2018年3月9日 20:27