本地文件拖拽到浏览器

最新推荐文章于 2023-09-14 21:00:33 发布

原创最新推荐文章于 2023-09-14 21:00:33 发布 · 447 阅读

CC 4.0 BY-SA版权

利用HTML5的File API可以实现文件拖拽到服务器上
直接看例子：

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <style>
    #drop_zone{
    	width: 500px; height:300px; background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="drop_zone">将文件拖拽到这里</div>
  <div id="output_area"></div>
  <script>
    var output = document.getElementById('output_area');
    var dropZone = document.getElementById('drop_zone');

    if (!(('draggable' in dropZone) && ('ondragenter' in dropZone)
          && ('ondragleave' in dropZone) && ('ondragover' in dropZone)
          && window.File)) {
    } else {

      function handleFileDragEnter(e) {
        e.stopPropagation();
        e.preventDefault();
        this.classList.add('hovering');
      }

      function handleFileDragLeave(e) {
        e.stopPropagation();
        e.preventDefault();
        this.classList.remove('hovering');
      }

      function handleFileDragOver(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
      }

      function handleFileDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        this.classList.remove('hovering');

        var files = e.dataTransfer.files;
        var outputStr = [];
        for (var i = 0, f; f = files[i]; i++) {
          var lastModified = f.lastModifiedDate;
          var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString()
                                             : 'n/a';
          outputStr += '<li><strong>' + f.name + '</strong> ('
                       + (f.type || 'n/a') + ')<br>大小：' + f.size
                       + '字节<br>修改时间：' + lastModifiedStr + '</li>';
        }
        output.innerHTML = '<ul>' + outputStr + '</ul>';
      }

      dropZone.addEventListener('dragenter', handleFileDragEnter, false);
      dropZone.addEventListener('dragleave', handleFileDragLeave, false);
      dropZone.addEventListener('dragover', handleFileDragOver, false);
      dropZone.addEventListener('drop', handleFileDrop, false);
    }
  </script>
</body>