js实现图片上传及预览

起飞羊

于 2024-07-22 16:55:42 发布

阅读量133

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_61744997/article/details/140613361

版权

法一：使用 `innerHTML` 属性：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>请上传图片</h1>
    <form name="form0" id="form0">
        <input type="file" multiple="multiple" class="file-input" id="file0" />
        <ul id="imgList">
            <!-- <li><img src="" alt=""></li> -->
        </ul>
    </form>

    <script>
      let inpt=  document.getElementById("file0")
      inpt.addEventListener('change',function(e){
        console.log('files',e.target.files);
        let files=e.target.files
        let arr=[]
        for(let val of files){
            let imgUrl=getUrlObj(val)
            if(imgUrl){
                arr.push(`<li><img src="${imgUrl}"/></li>`)
            }
            console.log(arr);
        }
        document.getElementById("imgList").innerHTML=arr.join('')

      })
      function getUrlObj(file){
        let url=null
        if(window.createObjectURL){
            url=window.createObjectURL(file)
        }else if(window.URL){
            url=window.URL.createObjectURL(file)
        }else if(window.webkitURL){
            url=window.webkitURL.createObjectURL(file)
        }
        return url
      }
    </script>

</body>

</html>

法二：使用 `createElement` 和 `appendChild` 方法：


    <script>
        let inpt=  document.getElementById("file0")
        inpt.addEventListener('change',function(e){
          console.log('files',e.target.files);
          let files=e.target.files
          let arr=[]
          for(let val of files){
              let imgUrl=getUrlObj(val)
              if(imgUrl){
                  let li=document.createElement('li')
                  let img=document.createElement('img')
                  img.src=imgUrl
                  li.appendChild(img)
                  document.getElementById('imgList').appendChild(li)
              }
             
          }
        })
        function getUrlObj(file){
          let url=null
          if(window.createObjectURL){
              url=window.createObjectURL(file)
          }else if(window.URL){
              url=window.URL.createObjectURL(file)
          }else if(window.webkitURL){
              url=window.webkitURL.createObjectURL(file)
          }
          return url
        }
      </script>