這是一個老問題，當開啟的網頁是另一網站時，javascript 是不能互通呼叫的 
因此 W3C 制訂的 HTML5 Web Message 規格，讓跨站網頁可以互通訊息
http://www.w3.org/TR/webmessaging/
https://html.spec.whatwg.org/multipage/comms.html#web-messaging

Can I Use 查詢發現幾乎所有瀏覽器都支援了, Good!
http://caniuse.com/#search=postMessage

Youtube 就依此標準做出工具，讓砍入 iframe Youtube 影音的網頁可以互動
例如上層網頁就可以控制 iframe 裡的影音的音量、暫停等
https://developers.google.com/youtube/iframe_api_reference

• How to Use HTML5 File Drag & Drop
• How to Open Dropped Files Using HTML5 and JavaScript
• How to Asynchronously Upload Files Using HTML5 and Ajax
• How to Create File Upload Progress Bars in HTML5 and JavaScript

這幾篇文章提到使用拖拉方式將檔案放到網頁裡面
然後在本地端預覽，然後ajax上傳，上傳時還有 progress bar
一整套運作模式說明，並附上sample code，挺棒的
附檔sample code

-------------------------------------------
測試後補充:
1. 範例中的 dragover event 要改成 dragenter 比較正確
然後 dragover 最好是做成 return false (ev.stopPropagation())
2. Server端不能用Requst.Files收檔案，要直接處理 Request.InputStream另存成檔案

 

在研究 Canvas 時, 發現的一個有趣應用, http://www.darkthread.net/miniajaxlab/html5canvas/canvas1a.htm