上传文件使用Ajax XmlHtt prequest [英] Upload File With Ajax XmlHttpRequest

问题描述

你好我试图用xmlhtt prequest与此code发送的文件。

 ＆LT;脚本＆GT;
    VAR URL =HTTP：//本地主机：80 / ......;
    $（文件）。就绪（函数（）{
        的document.getElementById（'上传'）。的addEventListener（'改变'，功能（五）{
            var文件= this.files [0];
            VAR XHR =新XMLHtt prequest（）;
            xhr.file =文件;如果你创建一个这样的作​​用域//没有必要
            xhr.addEventListener（'进步'，功能（五）{
                VAR完成= e.position || e.loaded，总= e.totalSize || e.total;
                的console.log（'XHR进展：'+（Mat​​h.floor（完成/总* 1000）/ 10）+'％'）;
            }， 假）;
            如果（xhr.upload）{
                xhr.upload.onprogress =功能（E）{
                    VAR完成= e.position || e.loaded，总= e.totalSize || e.total;
                    的console.log（'xhr.upload进步：+ +完成/+总+=+（Mat​​h.floor（完成/总* 1000）/ 10）+'％'）;
                };
            }
            xhr.onreadystatechange =功能（E）{
                如果（4 == this.readyState）{
                    的console.log（['XHR上传完成'，E]）;
                }
            };
            xhr.open（'后'，网址，真实）;
            xhr.setRequestHeader（内容类型，多部分/表单数据）;
            xhr.send（文件）;
        }， 假）;
    }）;
＆LT; / SCRIPT＆GT;
 

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

解决方案

1. 有没有这样的事情 xhr.file =文件; ;文件对象不应该附加这样的。

2. xhr.send（文件）不发送文件。你必须使用 FORMDATA 对象文件包装到一个的multipart / form-data的后的数据对象：

     VAR FORMDATA =新FORMDATA（）;
   formData.append（thefile，文件）;
   xhr.send（FORMDATA）;
    

在此之后，该文件可以在 $访问_ FILES ['thefile'] （如果你使用的是PHP）。

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

修改：在上述（2）是不正确的。它发送的文件，但它会发送作为原始post数据。这意味着你必须分析它自己的服务器上（和它往往不可能的，依赖于服务器的配置）。了解如何获得在这里 PHP 原始post数据。

Hi i am trying to send file with xmlhttprequest with this code.

<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>

but i got this error : the request was rejected because no multipart boundary was found help me pls..

解决方案

1. There is no such thing as xhr.file = file;; the file object is not supposed to be attached this way.

2. xhr.send(file) doesn't send the file. You have to use the FormData object to wrap the file into a multipart/form-data post data object:

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

After that, the file can be access in $_FILES['thefile'] (if you are using PHP).

Remember, MDC and Mozilla Hack demos are your best friends.

EDIT: The (2) above was incorrect. It does send the file, but it would send it as raw post data. That means you would have to parse it yourself on the server (and it's often not possible, depend on server configuration). Read how to get raw post data in PHP here.

这篇关于上传文件使用Ajax XmlHtt prequest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！