javascript - js拖拽 - js文件拖拽上传




在Google Chrome/Chromium和Safari中拖放文件上传? (6)

拖放文件上传可以在Firefox 3.6中完成。

Google搜索html5拖放文件上传-gmail提供了以下内容:

所有这些指南都使用FileReader (或者不支持其他浏览器的Firefox 3.6的弃用getAsBinary )。

然而,谷歌最近发布了Gmail的更新,允许在Chromium和Firefox中上传拖放文件,而Chromium没有FileReader 。 我每晚都使用最新的Chromium,它可以拖放上传文件,但不支持FileReader

我曾见过有人提到,通过拖放到<input type="file" /> ,拖放式上传可能是可能的,但一次只能支持一个文件,而Gmail的上传器可以处理拖放到其上的多个文件,所以这显然不是他们在做什么。

所以问题是,他们是如何做到的? 您如何支持Chromium for HTML5文件上传? 另外,你能否支持Safari?


你可以使用FormData存储文件,然后上传它。 例如

function setUp(){
  var dropContainer = document.getElementById("container");
  dropContainer.addEventListener("drop",dropHandler,false);
  dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false);
  dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false);
  dropContainer.addEventListener("drop", dropHandler, false);
  getResult()
}
function dropHandler(event){
  var files = event.dataTransfer.files;
  var count = files.length;
  form = new FormData();
  for(var i= 0;i<count;i++){
    form.append("file"+i, files[i]);
  }
  sendData();
}
function sendData(){
  var xhr = new XMLHttpRequest();  
  xhr.upload.addEventListener("progress", uploadProgress, false);  
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);  
  xhr.open("POST", "/upload");
  xhr.send(form);
  var progressBar = document.getElementById('progressBar');
  progressBar.style.display = 'block';
  progressBar.style.width = '0px';
}

演示在这里(http://flexinnerp.appspot.com/)只是喜欢它:)


对于我们自己的应用程序,我们只对FireFox进行拖放。 我们恢复到其他人的传统iframe上传。 为了检测是否支持拖放操作,我们运行以下代码:

if (typeof(window.File) == 'object' && typeof(window.FileReader) == 'function' && typeof(window.FileList) == 'object') {
   // DnD is supported!
}

希望这对一些人有帮助。



您可能对更符合技术和浏览器的内容感兴趣。

在我看来, Plupload很好,支持以下功能:

  • 分块
  • 拖放
  • PNG调整大小
  • JPEG调整大小
  • 类型过滤
  • 流上传
  • 分段上传
  • 文件大小限制
  • 上传进度

对于大多数以下技术:

  • 齿轮
  • HTML 5
  • Silverlight的
  • 的BrowserPlus

是的, Plupload ,它支持在Chrome beta上运行的HTML5拖放功能。


经过很多非常多的侦探工作,我在Chrome中有一些工作。 这只适用于Chrome。 在Safari上,它冻结。 在Firefox上,它不会让我删除文件。 IE打开掉落的文件。 即使在Chrome中,由于某种原因,拖放只能使用一次,之后您必须刷新页面。 (可能的原因是事件处理程序出了问题。)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">
            window.onload = function () {
                var div = document.getElementById('div');
                div.ondragenter = div.ondragover = function (e) {
                    e.preventDefault();
                    e.dataTransfer.dropEffect = 'copy';
                    return false;
                }
                div.ondrop = function (e) {
                    for (var i = 0; i < e.dataTransfer.files.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList)
                        var file = e.dataTransfer.files[i]; // file is a File object (https://developer.mozilla.org/en/DOM/File)

                        var xhr = new XMLHttpRequest;
                        xhr.open('post', 'handler.php', true);
                        xhr.onreadystatechange = function () {
                            if (this.readyState != 4)
                                return;
                            document.body.innerHTML += '<pre>' + this.responseText + '</pre>';
                        }
                        xhr.setRequestHeader('Content-Type', 'multipart/form-data');
                        xhr.setRequestHeader('X-File-Name', file.fileName);
                        xhr.setRequestHeader('X-File-Size', file.fileSize);
                        xhr.send(file); // For some reason sending the actual File object in Chrome works?
                    }

                    e.preventDefault();
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <div id="div" style="width: 100%; height: 200px; border: 1px solid blue">Drop here</div>
    </body>
</html>

handler.php:

    // This is not a true file upload. Instead, it sends the raw data directly.
    echo htmlentities(file_get_contents('php://input'));

警告: 这是适用于非常旧版本的Safari和Chrome的兼容性代码。 现代浏览器都支持FileReader API; 这里有一个教程: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applicationshttps://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

此代码现在仅在您需要支持Safari 5及更高版本或Chrome 6及更高版本时才有用。

一种可能性是使用SwellJS中使用的方法

使用<input type="file" multiple="multiple" />像这样:

<form method="post" enctype="multipart/form-data" id="uploadform">
  <input type="file" name="dragupload[]" multiple="multiple"
  onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>

输入元素的样式可以设置为opacity: 0并定位(绝对)在接受上传的元素上。 整个表单可以放置在iframe用于“伪Ajax”行为。 上传元素可以是一个隐藏的层,直到有东西被拖动。

这样的iframe看起来像:

<script>
<!--
  var entered = 0;
-->
</script>
<body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
  <form method="post" enctype="multipart/form-data" id="uploadform">
    Things can be dragged and dropped here!
    <input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
  </form>
</body>

这应该只在检测到Safari或Chrome时执行(因为其他浏览器不支持拖放到<input type="file" />元素),并且可以与Firefox的HTML5 drop事件组合使用3.6及更高版本。

我无法确定这是否是Gmail使用的方法,但它当然也适用。







html5