js原生写图片上传并展示

最新推荐文章于 2023-03-15 10:11:55 发布

柑橘乌云_

最新推荐文章于 2023-03-15 10:11:55 发布

阅读量294

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_57033755/article/details/128385664

版权

JavaScript 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

踩坑记录并分享给大家，愿大家常怀感恩的心~

代码不难，废话不多说，上代码

<body>
<div class="logo">
        <p>加盟商logo</p><input type="file" id="fil" style="opacity: 0; position: absolute;">
        <div style="display: flex;">
          <div style="border: 1px solid black; width: 100px; height: 100px;" id="addlogo">图片信息</div>
        </div>
        <div  id="imglist"></div>


      </div>
</body>

<script>
  let inpDom = document.querySelector('#fil') // 文件框，只不过隐藏了起来
  let picListDom = document.querySelector('#imglist') // 文件框，只不过隐藏了起来

    uploadFile(inpDom, picListDom);
    //  封装复用，下面的加盟商介绍只需要修改参数即可实现
  function uploadFile (inp, list) {
    let fileList = []; // 用于保存当前所有选择文件， 用于渲染及提交上传
    //删除
    function removeFile (i) {
        fileList.splice(i, 1);
        renderPic();
    }
    //添加
    function addFile (files) {
        fileList.push(files);
        renderPic();
    }
    //重新render
    function renderPic () {
        list.innerHTML = '';
        for (let i = 0; i < fileList.length; i++) {
            let file = fileList[i];
            console.log(file);
            const objectURL = window.URL.createObjectURL(file[0]);
            let div = document.createElement('div')
            let img = document.createElement('img')
            img.src = objectURL
            div.append(img);
            let deleteBtn = document.createElement('div');
            deleteBtn.innerHTML = 'x';
            deleteBtn.onclick = function () {
                removeFile(i);
            }
            div.append(deleteBtn);
            list.append(div);
        }
    }
    fil.onchange = function (event) {
        const files = event.target.files;
        addFile(files);
        fil.value = ''
    }
  }

  addlogo.addEventListener('click', function () {
    fil.click()  //点击上传图片，文件上传框打开
  })
</script>

上面展示图片方法还可以使用filereader

<script>
  let fil = document.querySelector('#fil') // 文件框，只不过隐藏了起来
  let addlogo = document.querySelector('#addlogo') //图片上传框

  addlogo.addEventListener('click', function () {
    fil.click()  //点击上传图片，文件上传框打开
  })
  // var fil=document.querySelector('#fil')
  fil.onchange = function (event) {
    // console.log(1);
    //判断是否支持FileReader
    if (window.FileReader) {
      var reader = new FileReader();
    } else {
      alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
    }
    //获取文件
    // console.log(event.target.files[0]);
    var file = event.target.files[0];
    var imageType = /^image\//;
    //是否是图片
    if (!imageType.test(file.type)) {
      alert("请选择图片！");
      return;
    }
    reader.readAsDataURL(file);
    //读取完成
    reader.onload = function (e) {
      //获取图片dom
      // var img = document.getElementById("preview");
      // console.log(e.target);
      //图片路径设置为读取的图片
      // img.src = e.target.result;
      var logo = document.querySelector('#imglist')
      // console.log(imglist);
      imglist.innerHTML = '<div style="border: 1px solid black; width: 100px; height: 100px;" id="addlogo">图片信息</div><div style="position: relative;"><img src="' + e.target.result + '" /><div id="del" style="width: 20px; height: 20px; background-color: red;position: absolute;right: 10px;top: 10px;"></div></div>'

      // 因為改變dom所以要在執行一次获取dom操作
      let addlogo = document.querySelector('#addlogo') //图片上传框
      addlogo.addEventListener('click', function () {
        fil.click()  //点击上传图片，文件上传框打开
      })
      
      var del=document.querySelector('#del');
      console.log(del);
      del.onclick=function(e){
        console.log(e.target.parentNode);
        e.target.parentNode.remove()
      }
    };
  }



</script>