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)
    

      

  • 相关阅读:
    阅读ARm芯片手册 阅读方法
    Linux驱动mmap内存映射
    Linux下inotify的基本使用及注意事项
    网络视频监控与人脸识别
    Linux pci驱动源码
    Verilog语法
    跟着我从零开始入门FPGA(一周入门XXOO系列)-1、Verilog语法
    周立功-我的25年嵌入式生涯
    Linux 进程学习
    [转]MFC下关于“建立空文档失败”问题的分析
  • 原文地址:https://www.cnblogs.com/zhenjianyu/p/12965671.html
Copyright © 2011-2022 走看看