使用Ajax XmlHttpRequest上传文件

嗨，我想用这个代码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> 

但我得到这个错误：请求被拒绝，因为没有find多部分边界帮助我请..

Answer 1

1. 没有xhr.file = file;这样的东西xhr.file = file; ; 文件对象不应该以这种方式附加。

2. xhr.send(file)不发送文件。 您必须使用FormData对象将文件包装到multipart/form-data发布数据对象中：

    var formData = new FormData(); formData.append("thefile", file); xhr.send(formData); 

之后，该文件可以在$_FILES['thefile'] （如果使用的是PHP）。

请记住， MDC和Mozilla Hack演示是你最好的朋友。

编辑 ：上面（2）是不正确的。 它发送的文件，但它会发送原始发布数据。 这意味着你将不得不在服务器上parsing它（这通常是不可能的，取决于服务器configuration）。 阅读如何在PHP中获取原始数据。