Javascript HTML5在新窗口中拖动上载_Javascript_Jquery_Html_File Upload

Javascript HTML5在新窗口中拖动上载

javascript jquery html file-upload

Javascript HTML5在新窗口中拖动上载,javascript,jquery,html,file-upload,Javascript,Jquery,Html,File Upload,我已经设置了一个HTML5拖放上传到我的网站。我遇到的问题是，当用户上载大文件时，他们必须等待上载完成，然后才能导航和使用站点的其余部分所以，我想做的是允许用户将文件拖到主站点，然后让它自动打开一个新窗口并在那里开始上传，这样他们在上传过程中仍然可以使用站点的其余部分。有人对如何实现这一点或是否可以做到这一点有什么建议吗？当发生删除事件时，您应该能够打开新窗口。下面是一个完整的例子首先，我们有一个文件上载区域和处理拖放的事件： <html> <head> <sc

我已经设置了一个HTML5拖放上传到我的网站。我遇到的问题是，当用户上载大文件时，他们必须等待上载完成，然后才能导航和使用站点的其余部分

所以，我想做的是允许用户将文件拖到主站点，然后让它自动打开一个新窗口并在那里开始上传，这样他们在上传过程中仍然可以使用站点的其余部分。有人对如何实现这一点或是否可以做到这一点有什么建议吗？

当发生删除事件时，您应该能够打开新窗口。下面是一个完整的例子

首先，我们有一个文件上载区域和处理拖放的事件：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="fileUpload" style="height:200; width:200; border:1px solid #ddd;"><span id="lbl">Drag and drop file here...</span></div>

<script>
$(function() {
    $('#fileUpload').get(0).addEventListener("drop", upload, false);        
    $('#fileUpload').get(0).addEventListener("dragenter", noopHandler, false);
    $('#fileUpload').get(0).addEventListener("dragexit", noopHandler, false);
    $('#fileUpload').get(0).addEventListener("dragover", noopHandler, false);

    function noopHandler(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    function upload(e) {
       e.stopPropagation();
       e.preventDefault();

       fileList = e.dataTransfer.files;
       var fileCount = fileList.length;

       // Only call the handler if 1 or more files was dropped.
       if (fileCount > 0) {
           window.open("upload.html");
       }
    }
});
</script>
</body>
</html>

尝试一下，希望它能帮助您解决问题。

如果您的应用程序是单页应用程序，那么Web Workers可能是一个解决方案。

您可能希望返回并接受旧问题的一些答案。我将尝试此方法。我不知道你可以通过windows传递文件。谢谢。我还没试过呢。过几天我就可以开始了。最近忙得不可开交。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
    $(function() {
        var fileList = window.opener.fileList;

        var reader = new FileReader();     
        reader.onloadend = function(e) { alert("Uploaded"); }

        for (file in fileList) {
            // Upload
            reader.readAsDataURL(fileList[file]);
        }
    });
</script>
</body>
</html>