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

时间:2021-2-20 作者:admin

?需求:把图片拖到浏览器页面中,浏览器页面背景即变成该图片

?布局准备:

  • 一个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>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。