【jQuery】將桌面檔案拖曳後上傳

想要將桌面的檔案使用拖曳的方式
拉到指定的區域
就可以啟動檔案上傳的功能

作法為

1. 改寫dragover與dragenter兩個事件，取消這兩個事件的預設效果(主要為over事件，先取消over事件的效果，否則會無法觸發drop事件)
2. 將檔案上傳功能寫進drop事件即可完成此項功能

先來看第一步的code

        
        $("div.content").on(
          'dragover',
          function(event) {
            event.preventDefault();
            event.stopPropagation();
          }
        );
        
        $("div.content").on(
          'dragenter',
          function(event) {
            event.preventDefault();
            event.stopPropagation();
          }
        );

接下來改寫drop事件

        
        $("div.content").on(
            'drop',
            function(event){
                if(event.originalEvent.dataTransfer){
                    if(event.originalEvent.dataTransfer.files.length) {
                        event.preventDefault();
                        event.stopPropagation();
                        /* Write Upload Function Here */
                        fileUpload();
                    }   
                }
            }
        );