HTML5 JavaScript POST文件上傳

Question

最近，我一直在考慮向我已經很簡單的php文件上傳腳本中添加一個簡單的HTML5拖放。 我已經閱讀了許多教程和其他解決方案，但似乎無法理解將文件發送到服務器的整個過程。 據我了解，XMLHttpRequest將發送數據，但是它將執行此操作而無需重新加載頁面。 這個，我不要。 目前，我正在使用的腳本將獲取POST數據並生成文件上傳輸出，例如。 服務器下載鏈接，縮略圖（如果有圖片等）。

如何拖放提交POST數據並訪問上傳輸出或重新加載頁面？

編輯：我正在使用以下拖放：

    <div id="drop_zone">Drag and drop a file here</div>

    <script>
          function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            var files = evt.dataTransfer.files; // FileList object.


            uploadFile(files[0]); //<-- This is where most examples will use XMLHttpRequest to construct form and send data
          }

        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            document.getElementById('drop_zone').style.backgroundColor = "#faffa3";
            evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }
        function handleDragLeave(evt) {
            document.getElementById('drop_zone').style.backgroundColor = "";
        }

          // Setup the dnd listeners.
          var dropZone = document.getElementById('drop_zone');
          dropZone.addEventListener('dragover', handleDragOver, false);
          dropZone.addEventListener('drop', handleFileSelect, false);
          dropZone.addEventListener('dragleave', handleDragLeave, false);                 
    </script>

Answer 1

如果您使用JQuery或其他具有事件功能的JavaScript庫，則應該能夠捕獲拖動事件並提交表單。

http://docs.jquery.com/UI/API/1.8/可拖動

http://api.jquery.com/on/

但是不涉及XMLHttpRequest ...

Answer 2

經過更多的閱讀和搜索后，我得出的結論是我原本想要的東西無法完成。

我要使用的解決方案是簡單地將覆蓋拖放區的透明/隱藏<input type="file"> 刪除的文件名將使用javascript從輸入中讀取，並顯示在放置區域中。 當然，這將依靠瀏覽器來支持將文件拖放到html文件輸入中。 從那里，我的上載腳本幾乎可以像用戶使用可見文件選擇器一樣運行。

很抱歉，對我想要的內容不太清楚。 我不太確定自己。 並感謝您的答復/評論。