HTML5拖放上传

3 回答

• 0

  对不起，目前还没有可用的跨浏览器解决方案 .

  当前浏览器实施问题

  FF，Safari，Chrome，IE（跨浏览器问题）

  没有递归文件夹上传 - 事实上，根本没有文件夹上传 . 虽然这不是一个显示停止，但如果浏览器也不会发送该文件夹中的所有文件，那么允许用户在文件上传输入框中选择文件夹似乎有点愚蠢 .

  Firefox 3.6 . *

  这个浏览器支持文件拖放，但实现很可能是有史以来最糟糕的 . 为了上传用户删除的文件，我们必须将整个文件读入内存，然后通过Ajax将其发送到我们的服务器 . 这适用于大约10MB的滴 . 如果您使用400MB文件尝试相同的操作，请忘记它！

  Firefox 4. *（Beta）

  Mozilla开发人员很快 - 他们意识到了之前实现的问题，并创建了一种实现拖放上传的全新方式 . FormData对象是一个新的JavaScript对象，它允许Web开发人员将文件上载直接插入到Ajax请求中，而无需先将文件读入内存 . 我对此非常兴奋，并迅速下载了Firefox 4，这是第二个测试版 . 在玩了不到5分钟之后，我强烈反对你不要尝试它 . 由于缺乏对Firebug的支持，我的系统变得非常不稳定和缓慢，并且开发是一个主要的痛苦 .

  Chrome（最新）

  这个浏览器是迄今为止最好的实现！简单明了，我唯一的抱怨是你不能通过拖放上传文件夹及其内容 .

  Safari 4. *＆5. *

  由于Safari就像谷歌Chrome一样 Build 在WebKit之上，所以我预计它也可以正常运行 . 哇，我错了！我在Safari 4和Safari 5中都尝试过这种方法 . 在将多个文件拖放到窗口中时，Safari会多次发送第一个文件，而不是发送所有文件 . 谈论一个主要的错误 . 为了使它更有趣，如果用户点击放置位置，他们可以使用标准文件选择对话框选择要上载的多个文件 - 并且按预期工作！我等不及Safari来解决这个问题 .

  Internet Explorer

  说实话，我还没有打算尝试在Internet Explorer中拖放上传 . 由于缺乏良好的开发工具和不合规的JavaScript引擎，试图支持IE是一种痛苦 . 由于我无法让所有首选浏览器都能玩得很好，我无法想象Internet Explorer会更接近 .

  source

  回复于 2024-04-27T22:13:38+08:00
• 2

  我会挑衅地看看运行Plupload . 它允许出色的浏览器功能，并支持在支持FileReader的HTML5浏览器中拖放多个文件 .

  所以，比方说，你没有html 5，它会弃用到flash / gears / silverlight，具体取决于个人安装的内容 .

  这是兼容性图表：http://www.plupload.com/index.php

  它有一个名为droparea的选项：“somediv”，允许您将文件拖入其中并自动提示文件上传 .

  如果您需要任何帮助，请告诉我 .

  回复于 2024-04-27T22:13:38+08:00
• 5

  这是一个简单的例子 . 如果将图像拖到红色div上，则会将图像附加到正文 . 我已经确认它适用于IE11，Chrome 38和Firefox 32.有关更详细的说明，请参阅此Html5Rocks文章 .

  <div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
  <script>
      var dropZone = document.getElementById('dropZone');
  
      // Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
      dropZone.addEventListener('dragover', function(e) {
          e.stopPropagation();
          e.preventDefault();
          e.dataTransfer.dropEffect = 'copy';
      });
  
      // Get file data on drop
      dropZone.addEventListener('drop', function(e) {
          e.stopPropagation();
          e.preventDefault();
          var files = e.dataTransfer.files; // Array of all files
          for (var i=0, file; file=files[i]; i++) {
              if (file.type.match(/image.*/)) {
                  var reader = new FileReader();
                  reader.onload = function(e2) {
                      var img = document.createElement('img');
                      img.src= e2.target.result;
                      document.body.appendChild(img);
                  }
                  reader.readAsDataURL(file);
      }   }   });
  </script>
  

  回复于 2024-04-27T22:13:38+08:00