如何獲取XMLHttpRequest中的實際文件？

Question

如何獲取XMLHttpRequest中的實際文件？ 使用evt.target.files會返回一個fileList對象，並且我無法抓取php端的實際文件，以便在服務器上保存。

下面是代碼，我已經連接顯示的responseText從PHP代碼print_r($_POST);

function handleFileSelect(evt) { 
 

 
    reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
    // Ensure that the progress bar displays 100% at the end. 
 
    progress.style.width = '100%'; 
 
    progress.textContent = '100%'; 
 
    setTimeout("document.getElementById('progress_bar').className='';", 2000); 
 

 

 
    ///////////THE JSON/////////////to encase file in JSON object 
 
    var sendFile = function(url, successHandler, errorHandler) { 
 
     var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 
 
     xhr.open('post', url, true); 
 

 
     //XHR progress tracking 
 
     xhr.upload.onprogress = function(event) { 
 
     //var native_progress = document.getElementById("native_progress"); 
 
     //alert('in native_progress function'); 
 
     if (event.lengthComputable) { 
 
      var complete = (event.loaded/event.total * 100 | 0); 
 
      native_progress.value = native_progress.innerHTML = complete; 
 
     } 
 
     }; 
 

 
     xhr.onreadystatechange = function() { 
 
     var status; 
 
     var data; 
 
     // https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate 
 
     if (xhr.readyState == 4) { // `DONE` 
 
      status = xhr.status; 
 
      if (status == 200) { 
 
      //data = JSON.parse(xhr.responseText); 
 
      data = xhr.responseText; 
 
      successHandler && successHandler(data); 
 
      } else { 
 
      errorHandler && errorHandler(status); 
 
      } 
 
     } 
 
     }; 
 

 
     var formData = new FormData(); 
 
     formData.append('file', evt.target.files[0]); 
 
     //xhr.setRequestHeader("Content-type", "multipart/gorm-data"); 
 
     //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
 
     xhr.send(formData); 
 
    }; 
 

 
    sendFile('/ePub_Reader/temp_upload/save.php', function(data) { 
 
     alert('Response Text: ' + data); 
 
    }, function(status) { 
 
     alert('Something went wrong.'); 
 
    }); 
 
    ///////////THE JSON - end///////////// 
 

 
    // Read in the image file as a binary string. 
 
    //reader.readAsBinaryString(evt.target.files[0]); 
 
    reader.readAsDataURL(evt.target.files[0]); 
 
    } 
 

 
} 
 

 
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

您的單個文件追加到FORMDATA返回圖像對象不是FileList

formData.append('file', evt.target.files[0]);