將HTML5拖放到新窗口中上傳

我已經設置了一個HTML5拖放上傳到我的網站。我遇到的問題是用戶上傳大文件時，他們必須等待上傳完成才能導航並使用網站的其他部分。將HTML5拖放到新窗口中上傳

所以，我想要做的是允許用戶拖動文件到主站點，然後讓它自動打開一個新窗口並開始上傳，使他們仍然可以使用網站的其餘部分，而上傳正在發生。任何人都有如何完成這些任務並提供建議，或者甚至可以完成這項工作？

2011-12-01 matt

你可能想回去接受你的舊問題的一些答案 – Serge

當發生丟棄事件時，您應該可以打開新窗口。下面是一個完整的例子。

首先，我們有一個文件上傳區域和事件處理拖放：

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

在彈出窗口（upload.html），我們從父窗口中的文件，並開始上傳：

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

試試看，並希望它有助於解決問題。

來源

2011-12-01 20:45:35

我會試試這個。我不知道你可以通過Windows傳遞文件。謝謝。 – matt

你試過了嗎？小心接受這個，如果它的工作？ –

我還沒有嘗試過。我可以在幾天後進入。最近被工作淹沒了。 – matt

如果您的應用程序是單頁應用程序，Web Workers可能是一個解決方案。

來源

2012-11-30 23:02:12

將HTML5拖放到新窗口中上傳

回答

相關問題