js图片转码传输（input传输、复制粘贴、拖拽传输）整理

js图片转码传输（input传输、复制粘贴、拖拽传输）整理

• 首先我们先写一下图片的转码base64方法，以便一会儿调用

  function handle_picture(type,data){
    let reader=new FileReader()
      //reader.readAsText()//此方法是txt文件转码
      reader.readAsDataURL(data[0])//此方法才是图片转码的方法
      reader.onload= function(e){
          //此时reader.result和e.target.result 便是转码后的图片即图片的base64码和图片后缀名(.png,.jpg……)
          let base64_picCode=reader.result.split(',')[1]//截取base64码
          ...... //此时便可以拿图片的base64码传输了
      }
      
  }
  

• 图片转码写好了，现在我们写怎么通过input标签获取图片并进行转码

  <div class="page">
     <input type="file" name="file" id="album_img" accept="image/*"/> 
  </div>
  

  $('.page')on('change','#ablum_img',function(){
      //this.files 便是选取的图片
      handle_picture('filelist',this.files)//调用图片转码
  })
  

• 接下来我们写图片拖拽传输, 监听事件(dragenter,dragover,drop)

  let but_txt=document.getElementById('but_txt')// 首先我们先获取要监听的目标，即图片要拖拽到哪里， 在这里我就叫它‘可释放目标’吧
  //接下来我们对“可释放目标”进行监听
  but_txt.addEventLisener('dragenter',function(e){
      //当拖动元素或选中的文本到一个可释放的目标时触发
      e.stopPropagation()//组织冒泡
      e.preventDefault()//组织默认事件
  });
  but_txt.addEventLisener('dragover',function(e){
      //当元素或文本被拖到一个可释放的目上时触发(每100ms触发一次)
      e.stopPropagation()//组织冒泡
      e.preventDefault()//组织默认事件
  })
  but_txt.addEventLisener('drop',function(e){
      //当元素拖到可释放目标上释放时触发
      e.stopPropagation()//组织冒泡
      e.preventDefault()//组织默认事件
      let files=e.dataTranfer.files 
      //此时files便是要发送的图片，可以转码
      handle_picture('flielist',files);
  })
  

• 最后我们写一下复制粘贴的图片处理 ,监听粘贴事件(paste)

  //同样我们对可粘贴到的目的地进行监听
  but_txt.addEvemtLisener('paste',function(event){
      let paste_items=event.clipboardData&&event.clipboardData.items;//判断如果event.clipboardData存在的话，把event.clipboardData.items变量
      let files=null;
      if(paste_items&&paste_items.length){
          //检索剪贴板pase_items中的image
          for(let i=0; i<paste_items.length;i++){
              if(paste_items[i].type.indexOf('image')!==-1){
                  files={0:paste_items[i].getAsFlie};//getAsfile()方法在浏览器下才会有
                  break;
              }
          }
      }
      //此时files已是转码的图片，接下来就可以调用刚开始写的转码方法了
      handle_picture('flielist',files)
  })