javascript实现移动端上传图片功能

2023-07-18 15:10:03 72

http://www.haoziyuan.ccpic:'', http://www.haoziyuan.cchttp://www.haoziyuan.ccpic2:'', http://www.haoziyuan.cchttp://www.haoziyuan.ccpic3:'', http://www.haoziyuan.cchttp://www.haoziyuan.ccpic4:'', http://www.haoziyuan.cchttp://www.haoziyuan.ccpic5:'', input1:true, input2:true, input3:true, input4:true, input5:true

upImg(){ //window.onload=function(){ letfileTag=document.getElementById('file'); //console.log(fileTag) //console.log(this.http://www.haoziyuan.ccpic) letthat=this fileTag.onchange=function(){ letfile=fileTag.files[0]; letfileReader=newFileReader(); //console.log(file) console.log(fileReader) //console.log(that.http://www.haoziyuan.ccpic) fileReader.onloadend=function(){ console.log(1212) if(fileReader.readyState==fileReader.DONE){ //console.log(that.http://www.haoziyuan.ccpic) console.log(fileReader) if(that.http://www.haoziyuan.ccpic==""){ console.log(1111) that.http://www.haoziyuan.ccpic=fileReader.result that.input1=false that.upLoad(fileReader.result) return }else{ if(that.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic2==''){ console.log(2222) that.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic2=fileReader.result that.input2=false return }else{ if(that.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic3==''){ console.log(3333) that.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic3=fileReader.result that.input3=false return }else{ if(that.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic4==''){ console.log(4444) that.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic4=fileReader.result that.input4=false return }else{ console.log(5555) if(that.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic5==''){ that.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic5=fileReader.result that.input5=false return } } } } } //console.log(that.http://www.haoziyuan.ccpic) } }; fileReader.readAsDataURL(file); } //} }, delImg(num){ if(num==1){ this.http://www.haoziyuan.ccpic='' this.input1=true } if(num==2){ this.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic2='' this.input2=true } if(num==3){ this.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic3='' this.input3=true } if(num==4){ this.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic4='' this.input4=true } if(num==5){ this.http://www.haoziyuan.cchttp://www.haoziyuan.ccpic5='' this.input5=true } }

#order.imgBox{ margin-bottom:100px; padding:20px; box-sizing:border-box; background:#fff; height:250px; } #order.Img{ width:90px; height:90px; background:#fff; text-align:center; line-height:132px; box-sizing:border-box; border-radius:5px; border:1pxsolidrgba(0,0,0,.2); position:relative; margin:020px20px0; } #order.myInput{ opacity:0; position:absolute; top:0; top:0; width:90px; height:90px; left:0; } #order.myDel{ color:#fff; position:absolute; right:-10px; top:-7px; width:25px; height:25px; border-radius:25px; line-height:25px; background:rgba(0,0,0,.5); }

javascript实现移动端上传图片功能

热门推荐

随机推荐