HTML5 JavaScript POST文件上傳

最近我一直在尋找添加簡單的HTML5拖放到我已經很簡單的PHP文件上傳腳本。我讀過很多教程和其他解決方案，但我似乎無法理解整個發送文件到服務器部分。據我所知，XMLHttpRequest將發送數據，但它會做到這一點，而無需重新加載頁面。這，我不想要。目前我正在使用的腳本將採用POST數據並生成文件上傳輸出，例如。服務器下載鏈接，縮略圖如果圖像等HTML5 JavaScript 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>

來源

2012-02-27 CYMA

你的代碼在哪裏？ – PeeHaa 2012-02-27 13:00:15

如果你想重新加載頁面，沒有任何理由使用XMLHttpRequest;只是做一個常規形式POST。 – Pointy 2012-02-27 13:02:14

@Pointy如何在文件被刪除後設置文件輸入字段？ – CYMA 2012-02-27 13:17:59