2014-07-04 17 views
0

我正在使用以下代碼將文件從電話上傳到Web服務器。如果我刪除ajax調用,並使用表單只上傳工作。如果我使用ajax,我使用PHP或CGI scipt來處理上傳失敗。 CGI給我一個格式錯誤的帖子標題錯誤。XMLHttpRequest()格式錯誤的郵件標題HTML5上傳

<script type="text/javascript"> 
    function uploadFile() { 

    var fd = new FormData(); 

      var count = document.getElementById('fileUpload').files.length; 


      for (var index = 0; index < count; index ++) 

      { 

       var file = document.getElementById('fileUpload').files[index]; 
       alert(file.name); 

      } 

    var xhr = new XMLHttpRequest(); 

    xhr.upload.addEventListener("progress", uploadProgress, false); 

    xhr.addEventListener("load", uploadComplete, false); 

    xhr.addEventListener("error", uploadFailed, false); 

    xhr.addEventListener("abort", uploadCanceled, false); 

    xhr.open("POST", "upload.pl"); 

    xhr.send(fd); 

    } 

    function uploadProgress(evt) { 

    if (evt.lengthComputable) { 

     var percentComplete = Math.round(evt.loaded * 100/evt.total); 

     document.getElementById('progress').innerHTML = percentComplete.toString() + '%'; 

    } 

    else { 

     document.getElementById('progress').innerHTML = 'unable to compute'; 

    } 

    } 

    function uploadComplete(evt) { 


    alert(evt.target.responseText); 

    } 

    function uploadFailed(evt) { 

    alert("There was an error attempting to upload the file."); 

    } 

    function uploadCanceled(evt) { 

    alert("The upload has been canceled by the user or the browser dropped the connection."); 

    } 

</script> 


    <form id="form1" enctype="multipart/form-data" method="post" action="upload.pl"> 
    <div> 
     <label for="fileUpload">Take or Select Images</label><br /> 
     <input type="file" name="fileUpload" id="fileUpload" accept="image/*" capture="camera" /><br /> 
     <input type="text" name="email" value="" /> 
    </div> 
    <div id="details"></div> 
    <div> 
     <input type="button" onclick="uploadFile();" value="Upload" /> 
    </div> 
    <div id="progress"></div> 
    </form> 
+0

標準的AJAX不能做文件上傳。通常的解決方法是將表單字段關閉到隱藏的iframe中並在那裏執行約定表單提交。 –

+1

除非我錯過了什麼,你實際上並沒有發送任何東西! – jcaron

回答

1

您從未使用任何數據填充fd!從我在讀Using FormData Objects

var fd = new FormData(); 

應該

var fd = new FormData(document.getElementById('form1')); 
+0

這工作出色。 – chrisrth