pc端拖拽图片上传

最新推荐文章于 2025-02-21 14:39:32 发布

ヽ错落不堪的年华。

最新推荐文章于 2025-02-21 14:39:32 发布

阅读量283

点赞数 1

分类专栏：技术交流技术总结前端文章标签： js javascript html

本文链接：https://blog.youkuaiyun.com/qq_44777678/article/details/112239770

版权

技术交流同时被 3 个专栏收录

107 篇文章

订阅专栏

技术总结

103 篇文章

订阅专栏

前端

97 篇文章

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    html,
    body {
      padding: 10px;
    }

    #area {
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div id="area">将图片拖拽到此区域</div>
  <div id="preview"></div>

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    // 禁止浏览器默认事件 - 非常重要
    $(document).on({
      dragleave: function (e) {      //拖离
        e.preventDefault();
      },
      drop: function (e) {           //拖后放
        e.preventDefault();
      },
      dragenter: function (e) {      //拖进
        e.preventDefault();
      },
      dragover: function (e) {       //拖来拖去
        e.preventDefault();
      }
    });

    var box = document.getElementById('area'); //拖拽区域
    box.addEventListener("drop", function (e) {
      e.preventDefault(); //取消默认浏览器拖拽效果
      var fileList = e.dataTransfer.files; //获取文件对象

      //检测是否是拖拽文件到页面的操作
      if (fileList.length == 0) {
        alert('不是图片')
        return false;
      }

      //检测文件是不是图片
      if (fileList[0].type.indexOf('image') === -1) {
        alert("您拖的不是图片！");
        return false;
      }

      //拖拉图片到浏览器，可以实现预览功能
      var imgurl = window.webkitURL.createObjectURL(fileList[0]);
      var filename = fileList[0].name; //图片名称
      var filesize = Math.floor((fileList[0].size) / 1024);
      console.log(fileList[0])

      if (filesize > 2048) {
        alert("上传大小不能超过2M.");
        return false;
      }

      let img = document.createElement('img')
      img.src = imgurl;
      document.querySelector('#preview').appendChild(img)
	
	 // 上传服务器逻辑自己写
    }, false);
  </script>
</body>

</html>