使用Ajax上傳文件XmlHttpRequest

嗨，我想用此代碼發送xmlhttprequest文件。使用Ajax上傳文件XmlHttpRequest

<script> 
    var url= "http://localhost:80/...."; 
    $(document).ready(function(){ 
     document.getElementById('upload').addEventListener('change', function(e) { 
      var file = this.files[0]; 
      var xhr = new XMLHttpRequest(); 
      xhr.file = file; // not necessary if you create scopes like this 
      xhr.addEventListener('progress', function(e) { 
       var done = e.position || e.loaded, total = e.totalSize || e.total; 
       console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%'); 
      }, false); 
      if (xhr.upload) { 
       xhr.upload.onprogress = function(e) { 
        var done = e.position || e.loaded, total = e.totalSize || e.total; 
        console.log('xhr.upload progress: ' + done + '/' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%'); 
       }; 
      } 
      xhr.onreadystatechange = function(e) { 
       if (4 == this.readyState) { 
        console.log(['xhr upload complete', e]); 
       } 
      }; 
      xhr.open('post', url, true); 
      xhr.setRequestHeader("Content-Type","multipart/form-data"); 
      xhr.send(file); 
     }, false); 
    }); 
</script>

，但我得到這個錯誤：請求被拒絕，因爲沒有多邊界發現幫我請..

來源

2011-06-02 Sedat Başar

有作爲xhr.file = file;沒有這樣的事;文件對象不應該以這種方式附加。
xhr.send(file)不發送文件。你必須使用FormData對象的文件封裝成multipart/form-data後的數據對象：
```
var formData = new FormData(); 
formData.append("thefile", file); 
xhr.send(formData); 
```

在此之後，該文件可以在$_FILES['thefile']訪問（如果你使用的是PHP）。

請記住，MDC和Mozilla Hack demos是你最好的朋友。

編輯：上述（2）不正確。它會發送文件，但會將其作爲原始發佈數據發送。這意味着你必須在服務器上自己解析它（這通常是不可能的，取決於服務器配置）。閱讀如何使用PHP here獲取原始數據。

來源

2011-06-02 09:09:04 timdream

ty這麼多幫助我.. – 2011-06-02 11:48:07

xhr.send（文件）基於XHR2，它是XMLHttpRequest對象的新版本，僅在某些瀏覽器中可用。 – nkassis 2012-04-20 19:19:16

@nkassis是的，但它會發送文件本身作爲帖子正文，而不是構建服務器解析的多部分postdata。 – timdream 2012-04-22 18:19:48

使用Ajax上傳文件XmlHttpRequest

回答

相關問題