AJAX文件上传与XMLHtt prequest [英] AJAX File Upload with XMLHttpRequest

问题描述

我知道有很多类似的问题，但我还是没有找到我的问题的解决方案。 我想上传与XMLHtt prequest的文件，所以我开发了下面的code：

I know there are a lot of similar questions, but I still haven't found a solution for my problem. I'm trying to upload a file with XMLHttpRequest, so I developed the code below:

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 . '
}';
?>;

但变种$ _FILES ['文件']似乎是空的，这意味着该文件不被发送到服务器。 然后，我决定使用FORMDATA对象，在code以下

But the var $_FILES['file'] seems to be empty, which means that the file isn't being sent to the server. Then i decided to use the FormData Object, in the code below

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的文件，该变种 $ _ FILES ['文件'] 变空一次

注意：在文件变种相当于类似document.getElementsById（'的FileInput）的文件[0];

And it worked, but only with file sizes low to about 8mb. When I try sending a file that has more than 8mb of size, the var $_FILES['file'] becomes empty again

NOTE: the 'file' var corresponds to something like document.getElementsById('fileInput').files[0];

推荐答案

要避免post_max_size的限制问题......但也出现内存不足的问题，双方：

To avoid the post_max_size limitation problem... but also out of memory problems on both sides :

• 使用PUT POST代替：

• use PUT instead of POST :

xhr.open（放，upload.php的，真正的）;

添加自定义页眉指定原始文件名和文件大小：

add custom headers to specify original FileName and FileSize :

xhr.setRequestHeader（X文件名，file.name）;
xhr.setRequestHeader（X-文件大小，file.size）;

直接在XHR发送方法使用File对象：

use the File object directly in your XHR send method :

xhr.send（文件）;

请注意，File对象可以直接通过文件您输入的特性[type = file] DOM对象的

• 通过$ _ SERVER阅读自定义页眉：

• read the custom headers via $_SERVER :

$文件名= $ _ SERVER ['HTTP_X_FILE_NAME'];
$文件大小= $ _ SERVER ['HTTP_X_FILE_SIZE'];

使用PHP读取文件中的数据：//输入：

read file data using php://input :

$ =中的fopen（'php的：//输入'，'R'）;

您会然后可以发送非常大的文件（1GB或以上），没有任何限制！

You'll then be able to send very big files (1GB or more) without any limitation!!!

这code适用于火狐4+，Chrome浏览器6+，IE10 + 的

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