拖拽上传

最新推荐文章于 2024-08-20 15:46:47 发布

王靓靓

最新推荐文章于 2024-08-20 15:46:47 发布

阅读量69

点赞数

本文链接：https://blog.csdn.net/s_unny_wang/article/details/113987081

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>h5拖拽</title>
    <style>
      label {
        display: block;
        width: 80%;
        height: 200px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <img src="" alt="" />
    <label id="dropZone"> </label>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
      function drop(oDragWarp) {
        // 拖进
        oDragWarp.addEventListener(
          "dragenter",
          function (e) {
            e.preventDefault();
          },
          false
        );

        // 拖离
        oDragWarp.addEventListener(
          "dragleave",
          function (e) {
            e.preventDefault();
          },
          false
        );

        // 拖来拖去,一定要注意dragover事件一定要清除默认事件
        // 不然回无法触发后面的drap事件
        oDragWarp.addEventListener(
          "dragover",
          function (e) {
            e.preventDefault();
          },
          false
        );

        // 扔
        oDragWarp.addEventListener("drop", function (e) {
          dropHandler(e);
        });

        // 本地图片拖拽到页面中后要进行的处理都在这
        var dropHandler = function (e) {
          e.preventDefault();
          // 获取文件列表
          var fileList = e.dataTransfer.files;
          if (fileList.length == 0) {
            return;
          }

          // 文件的类型
          // console.log(fileList[0].type);
          var type = get_type(fileList[0].name);
          console.log(type);
          // 实例化file reader对象
          var reader = new FileReader();
          var img = document.querySelector("img");
          reader.onload = function (e) {
            // 文件的类型
            img.src = this.result;
          };
          reader.readAsDataURL(fileList[0]);
        };
      }

      // 获取文件类型
      function get_type(fileName) {
        var index = fileName.lastIndexOf(".") + 1;
        var type = fileName.substring(index, fileName.length);
        return type;
      }

      // label的拖拽
      var droElement1 = document.querySelector("label");
      drop(droElement1);
    </script>
  </body>
</html>

王靓靓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽上传

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>h5拖拽</title> <style> label { di
复制链接

扫一扫