本地文件拖拽到浏览器

最新推荐文章于 2023-07-04 20:50:43 发布

RaylnGuan

最新推荐文章于 2023-07-04 20:50:43 发布

阅读量825

点赞数

分类专栏： Html5&Css3 文章标签：前端 ViewUI

本文链接：https://blog.csdn.net/rayln/article/details/84409605

版权

Html5&Css3 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

利用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>

RaylnGuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
本地文件拖拽到浏览器

利用HTML5的File API可以实现文件拖拽到服务器上直接看例子：[code="html"] #drop_zone{ width: 500px; height:300px; background-color: yellow; } 将文件拖拽到这里 var output = docum...
复制链接

扫一扫