zoukankan      html  css  js  c++  java
  • 图片上传 & 预览

    实现预览图片

    <img id='previewImg'/>
    <input id='selectImg' type='file'/>
     
    function createObjectURL(file){
      //兼容问题
      if(window.URL){
        return window.URL.createObjectURL(file)
      }else if(window.webkitURL){
        return window.webkitURL.createObjectURL(file)
      }else{
        return null
      }
    }
    function createImgUrl(file){
      let fileReader = new FileReader()
      fileReader.readAsDataURL(file)
      fileReader.onload = (e)=>{
        return e.target.result
      }
    }
    let previewImg = document.getElementById('previewImg'),selectImg = document.getElementById('selectImg');
    selectImg.addEventListener('change',(e)=>{
      //如果选择多张图片,实现图片预览,需循环e.target.files,然后new Image()动态生成img,循环设置img的src的值,最后append到body中。
      let file = e.target.files[0]
      // 第一种方式
      previewImg.src = createObjectURL(file)
      // 第二种方式
      previewImg.src = createImgUrl(file)
    },false)

    实现图片上传

    <input id='selectImg' type='file'/>
     
    function uploadImg(data){
      let xhr = new XMLHttpRequest()
      xhr.open('POST','/postImg')
      xhr.onreadystatechange = () => {
        console.log('postImg')
      }
      xhr.send(data)
    }
    let selectImg = document.getElementById('selectImg');
    selectImg.addEventListener('change',(e)=>{
        //’file‘字段应和后端沟通,确保后端知道取字段的值。
      let files = e.target.files,formData = new FormData();
      formData.append('file',files)
      uploadImg(formData)
    },false)
    

      

  • 相关阅读:
    [MAC]如何抹掉 Mac 磁盘
    [MAC]出售、赠送或折抵 Mac 前该怎么做
    转载 软件项目计划如何编写举例
    GIT
    AWR实战分析之----direct path read temp
    ASM 磁盘组的的scrip
    巨杉db
    High waits on control file sequential read
    如何减小SQL 的物理读,。
    block size大小
  • 原文地址:https://www.cnblogs.com/zhenjianyu/p/12965671.html
Copyright © 2011-2022 走看看