js 拖拽上传 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<style>
  .uploadBox {
    width: 670px;
    height: 270px;
    padding: 38px 30px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 6px;
    position: relative;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  }

  .uploadBox .uploadGroup {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #c1c1c1;
  }

  .uploadBox .uploadGroup .t1 {
    font-size: 14px;
    color: #9e9e9e;
  }

  .uploadBox .uploadFooter {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 10px;
    font-size: 12px;
    color: #9e9e9e;
}

</style>
<body>
  <div id="drop_area" class="uploadBox" onClick="javascript:document.getElementById('fileupload').click();">
    <div class="uploadGroup">
        <p class="t1">拖拽图片至此区域任何位置</p>
    </div>
    <div class="uploadFooter">仅支持10M以下jpg、jpeg、png、bmg、gif格式图片</div>
    <input style="display:none;" id="fileupload" type="file" name="file" accept="image/*" multiple>
</div>
</body>
<script>
  // 获取元素信息并绑定拖拽事件
  var dp = document.getElementById('drop_area');

  // 拖拽前
  dp.addEventListener('dragover', function(e) {
      e.stopPropagation();
      e.preventDefault();
      e.dataTransfer.dropEffect = 'copy';
  });
  // 拖拽后
  dp.addEventListener("drop", function(e) {
      e.stopPropagation();
      e.preventDefault();
      console.log(e.dataTransfer.files, 'files');
  });

  // 上传完成
  $('#fileupload').change(function(){
      var files = $(this)[0].files;
      console.log(files, 'files2');
  });
</script>
</html>

 

posted @ 2021-12-29 17:38  本溢  阅读(121)  评论(0)    收藏  举报