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)
    

      

  • 相关阅读:
    c# 判断网络是否连接
    有关TSQL的10个好习惯
    相同文件只能一个进程读取
    我的单元测试方案
    又用了一把VBA
    深入理解字符串和字节数组转换
    如何清除应用程序承载 WebBrowser 控件时缓存
    VB也绿色
    ASP.Net网站开发的单元测试方案
    Nunit使用心得
  • 原文地址:https://www.cnblogs.com/zhenjianyu/p/12965671.html
Copyright © 2011-2022 走看看