使用XMLHttpRequest上传AJAX文件

时间:2012-05-06 23:58:59

标签: javascript ajax file upload xmlhttprequest

我知道有很多类似的问题,但我仍然没有找到解决问题的方法。 我正在尝试使用XMLHttpRequest上传文件,因此我开发了以下代码:

var sendFiles = function(url,onload,onerror,file,headers){
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp'),
    upload = xhr.upload;
    API.addEvent(xhr,'readystatechange',function(){
        if(xhr.readyState==4)
            if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
                this.response = this.response || this.responseText;
                onload.call(xhr);
            }else onerror.call(xhr);
    });
    xhr.open('POST',url,true);
    for(var n=0;n<headers.length;n++)
        xhr.setRequestHeader(headers[n]);
    xhr.send(file);
    return xhr;
};

PHP端脚本是:

<?php
header('Content-type: text/html;charset=ISO-8859-1');
$status = 0;
if(@copy($_FILES['file']['tmp_name'],'test\\' . $_FILES['file']['name']))
    $status = 1;
else
    $err = '0';
echo '{
    "status": ' . $status . '
}';
?>;

但是var $ _FILES ['file']似乎是空的,这意味着文件没有被发送到服务器。 然后我决定在下面的代码中使用FormData对象

var sendFiles = function(url,onload,onerror,file,headers){
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new    ActiveXObject('Microsoft.XMLHttp'),
    upload = xhr.upload,
    formData = new FormData();
    formData.append('file',file);
    API.addEvent(xhr,'readystatechange',function(){
        if(xhr.readyState==4)
            if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
                this.response = this.response || this.responseText;
                onload.call(xhr);
            }else onerror.call(xhr);
    });
    xhr.open('POST',url,true);
    for(var n=0;n<headers.length;n++)
        xhr.setRequestHeader(headers[n]);
    xhr.send(formData);
    return xhr;
};

它有效,但只有文件大小低至约8mb。当我尝试发送大小超过8mb的文件时,var $_FILES['file']再次变为空

注意:'file'var对应于document.getElementsById('fileInput')。files [0];

2 个答案:

答案 0 :(得分:3)

更改ini文件中的post_max_size指令

答案 1 :(得分:1)

Ajax调用不会限制大小。它可能是php ini文件中的最大文件大小。