2010-03-05 88 views
6

我正在研究一個Web框架/技術,它允許將n個文件系統中的拖放文件拖放到Web應用程序中。目的當然是將這些文件上傳到應用程序服務器。將n從文件系統拖放到Web應用程序

在Flex中,它似乎是不可能的(儘管它適用於AIR)。 我已經找到了Google Gears的一種方式,但是這迫使用戶安裝Gears作爲瀏覽器插件。

對於Java小程序,它似乎是可能的,但它要求用戶接受安全規則例外......(這對我來說很奇怪,因爲通過DnD讀取用戶指定的文件並非「不太安全」比如果用戶通過標準的經典上載對話框指定了文件...)。

是否有任何非侵入性的方式來允許此功能,沒有安裝任何插件和沒有接受安全警告消息框?

+0

我確認3年後,爲了設計一個Flash上​​傳器後備,似乎我們仍然需要使用AIR來拖放文件拖放功能。我搜索了沒有運氣的AS3解決方案。希望在2013年開始的時候,HTML5會變得更加普遍。 – 2012-12-21 21:24:20

回答

4

瀏覽器一般沒有支持這樣的事情內置的。

+2

另外,我會避免齒輪。谷歌正在放棄它支持HTML 5的內置功能。http://www.readwriteweb.com/archives/google_dumps_gears_for_html5.php – NotMe 2010-03-05 15:56:47

4

火狐3.6,顯然(夜間可能的Webkit)最新的Safari瀏覽器通過HTML5支持這一點。我最近一直在玩它,它工作得很好。我所做的示例只是在頁面中插入縮略圖,但可以調整此數據以將數據上載到服務器。這是我寫的的JavaScript/jQuery代碼,隨意使用這一點:

function debug(string) { 
    $("#debugArea").append(string); 
} 

$(function() { 
    // We need to override the dragover event, otherwise Firefox will just open the file on drop 
    $("#dropArea").bind("dragover", function(event) { 
    event.preventDefault(); 
    }); 

    // This is where the actual magic happens :) 
    $("#dropArea").bind("drop", function(event) { 
    event.preventDefault(); 
    debug("Dropped something: "); 
    // Since jquery returns its own event object, we need to get the original one in order to access the files 
    var files = event.originalEvent.dataTransfer.files; 
    // jquery nicely loops for us over the files 
    $(files).each(function(index, file) { 
    if(!file.type.match(/image.*/)) { // Skip non-images 
     debug(file.name) 
     debug(" <em>not an image, skipping</em>; "); 
     return; 
     } 

     // We need a new filereader for every file, otherwise the reading might be canceled by the next file 
     var filereader = new FileReader(); 
     filereader.onloadend = function(event) { $("#thumbnails").append("<img src='"+event.target.result+"' width='100px' />"); }; 
     debug(file.name); 
     debug("; "); 

     // Read the file in data URL format so that we can easily add it to an img tag. 
     filereader.readAsDataURL(file); 
    }); 
    debug("<br/><br/>"); 
    }) 

}); 

併爲它的HTML:

<div id="dropArea"> 
    <p>Drop images here!</p> 
</div> 
<div id="thumbnails"> 
</div> 
<div id="debugArea"> 
    <strong>Debug Info:</strong><br/> 
</div> 
+0

我非常喜歡這個代碼。即使它很簡潔,它也可以解決上傳文件時遇到的許多問題,並且有助於設計簡單的功能來上傳和獲取縮略圖,而不是搜索現有的代碼和片段。順便說一句,使用filereader將文件讀取到URI也允許對文件應用加密,然後將它們作爲二進制數據發佈到腳本。 – 2012-12-21 21:34:22

相關問題