【WebAPI小案例之】拖放图片到浏览器并预览

VincyGN
1,029 阅读2分钟

👉需求：把图片拖到浏览器页面中，浏览器页面背景即变成该图片

👉布局准备：

  • 一个h3，写文字“拖拽图片到虚线内”
  • 给body加边框，用来显示上传后的图片
  • 默认body没有高度，因此边框没有高度，由于document 的默认高度是浏览器的可视高度，因此给html和body的高度都设置为100%，这样，html继承document 的高度，body继承html的高度，都显示可视区的高度，布局代码如下：
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      height: 100%;
    }
    body {
      border: 5px dashed black;
    }
  </style>
</head>
<body>
  <h3>拖拽图片到虚线内 </h3>
</body>
</html>

👉核心技术：

  • dragover鼠标悬停事件、drop鼠标拖放事件、 e.preventDefault()阻止事件默认行为、URL.createObjectURL()将url地址进行解码、e.dataTransfer.files[0]获取被拖拽进来的文件

👉思路：

  1. 由于需要鼠标拖拽图片到浏览器，因此，需要给body先添加一个dragover鼠标悬停事件，事件内，阻止鼠标拖放的默认行为
  2. 给body添加鼠标拖放事件，将图片拖进浏览器，这个时候会发现，浏览器会打开一个新的页面，来显示图片；这是因为，浏览器默认有一个拖放行为，即【拖放文件进来时，打开新页面来显示图片】，因此
    • 事件内，要先清除浏览器的【拖放文件进来时，打开新页面来显示图片】的默认行为
    • 然后，获取到拖放进来的文件；那怎么获取呢？此时，需要用到浏览器的【事件对象】
  3. 浏览器的【事件对象】存储了一系列事件触发时的信息，比如坐标等等，并保存在dataTransfer的files文件内，默认是一个伪数组，因此可用e.dataTransfer.files[0]方法，获取拖进来的文件
  4. 但是，获取到的数据，默认是url地址信息，因此要用URL.createObjectURL()将url地址进行解码，解码后，就是文件的路径地址
  5. 将解码后的文件地址，赋值给body的background

👉代码实现：

  <script>
    // 1、这里的阻止事件默认行为，仅仅是为了让drop事件能够触发
    document.body.ondragover = function (e) {
      e.preventDefault()
    }
    //2、 对于浏览器而言，也默认有一个拖放行为
    // 它默认的拖放行为就是打开你拖进来的文件
    document.body.ondrop = function (e) {
      // 因此，这里阻止是为了阻止浏览器的默认行为：也就是打开文件的行为
      e.preventDefault()
      // 事件对象保存了事件触发时的所有相关信息
      // 拖进来的在事件对象.dataTransfer.files里面
      // 它是一个伪数组，里面保存了所有拖进来的文件
      // 如果取下标0就取到第一个
      // console.log(e.dataTransfer.files[0])
      // 不能直接赋值，因为我要的是路径，但你给的是一个文件对象
      // document.body.style.background = `url(${e.dataTransfer.files[0]})`

      // 把这个文件对象转成一个临时的url（ajax这个阶段会用这个方法）
      let url = URL.createObjectURL(e.dataTransfer.files[0])
      document.body.style.background = `url(${url}) no-repeat center / cover`
    }
  </script>
avatar
文章
阅读
粉丝