XMLHttpRequest2将文件上传到api

时间:2013-06-06 12:36:09

标签: jquery ajax xmlhttprequest

我试图理解XMLHttpRequest2请求中使用它时会发生什么:

xhr.send(文件)

这里有什么流程?它首先在某处上传临时数据然后发布吗?在我的实验中,只有当文件达到100%上传(上传到哪里?)时才会发送请求

我遇到了一些我找不到原因的问题。

我的上传适用于20mb大小的文件,但是一旦它们变得更像50mb加上它就会因为Bad Request而失败,服务器永远不会从我的应用程序中获取请求。

这是我的代码,遵循html5rocks教程:

var xhr = new XMLHttpRequest();
xhr.open('POST', "foo url goes here");
xhr.send(file);

正如我所说的,这适用于较小的文件,但是文件很糟糕,并且永远不会像50mb这样的大文件到达服务器。

这也不适用于普通的AJAX帖子,同样的问题。

我冒充WCF休息服务。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Ajax upload form</title>
  <script src="app/js/lib/jquery-2.0.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function(){
    $(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'myurl',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        // Form data
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false
    });
});
    function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

  })
  </script>
</head>
<body>
    <form enctype="multipart/form-data">
  <input name="file" type="file" />
  <input type="button" value="Upload" />
</form>
<progress></progress>
</body>
</html>

0 个答案:

没有答案