javascript实现移动端上传图片功能的方法-创新互联

这篇文章主要介绍javascript实现移动端上传图片功能的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

10年积累的成都做网站、网站制作、成都外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有长宁免费网站建设让你可以放心的选择与我们合作。

核心部分(.html)

window.onload = function() {
 let fileTag = document.getElementById('file');
 // console.log(fileTag)
 // console.log(this.pic)
 let that = this
 
 fileTag.onchange = function() {
  let file = fileTag.files[0];
  let fileReader = new FileReader();
  // console.log(file)
  console.log(fileReader)
  // console.log(that.pic)
  fileReader.onloadend = function() {
  console.log(1212)
  if (fileReader.readyState == fileReader.DONE) {
   // console.log(that.pic)
   console.log(fileReader)
   
   if(that.pic=="") {
   console.log(1111)
   that.pic = fileReader.result
   that.input1 = false
   
   that.upLoad(fileReader.result)
   return
   }else{
   if(that.pic2=='') {
    console.log(2222)
    that.pic2 = fileReader.result
    that.input2 = false
    return
   }else {
    if(that.pic3=='') {
    console.log(3333)
    that.pic3 = fileReader.result
    that.input3 = false
    return
    }else {
    if(that.pic4=='') {
     console.log(4444)
     that.pic4 = fileReader.result
     that.input4 = false
     return
    }else {
     console.log(5555)
     if(that.pic5=='') {
     that.pic5 = fileReader.result
     that.input5 = false
     return
     }
     
    }
    }
   }
   
   }
   // console.log(that.pic)
  }
  };
  
  fileReader.readAsDataURL(file);
 }
} 

本文名称：javascript实现移动端上传图片功能的方法-创新互联
本文网址：http://shouzuofang.com/article/edsgi.html