AJAX File Upload with XMLHttpRequest

Question

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

And the PHP-side script is:

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

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

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

And what is the upload file size limit in your ini file? – epascarello May 07 '12 at 00:02 — epascarello, May 07 '12 at 00:02

score 17 · Accepted Answer · answered Aug 02 '12 at 06:02

17

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

On the client side

use PUT instead of POST :

xhr.open("put", "upload.php", true);
add custom headers to specify original FileName and FileSize :

xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-Size", file.size);
use the File object directly in your XHR send method :

xhr.send(file);

Please note that the File object can be obtained directly via the “files” property of your input[type=file] DOM object

On the server side

read the custom headers via $_SERVER :

$filename = $_SERVER['HTTP_X_FILE_NAME'];
$filesize = $_SERVER['HTTP_X_FILE_SIZE'];
read file data using php://input :

$in = fopen('php://input','r');

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

This code works for FireFox 4+, Chrome 6+, IE10+

answered Aug 02 '12 at 06:02

Opty

504
5
10

Good explanation, thank you, but there are two limitations in your solution. 1st: If I use the File object directly in XHR.send method I can't send more than one file. Only one file. 2nd: As written in the PHP Manual "A stream opened with `php://input` can only be read once". It means again that no more than one request with one file can be made with your technique. Do you have any more solutions how to send more than one file using 'php://input' and File object directly in XHR.send method? I tried to loop xhr.send(file[n]) but the problem with the readystate property apears. – Green Aug 08 '12 at 22:39
1

Yes indeed, each call to the PHP script is for one file, so if you want to send many **related** files at the same time, simply allocate a XHR for each files on the client side, then when all the sends are completed, just call one more final php script referring to all files and do what you have to do with those related files. We have "dropbox like" internal webapp that works very well with that method – Opty Sep 03 '12 at 09:54
on the server side how can i use the `$filename $filesize and $in` to copy the file??! do i use `copy()` or `move_uploaded_file`? i have a restriction on my server that wont allow me to upload files bigger than 2 mb! please help – razz Mar 21 '13 at 18:55
1

Use `while($data = fread($in, 1024)) fwrite($out, $data);` with $out a write opened handle to your destination file on the server – Opty May 13 '13 at 06:33
Please can someone guide me on how to get a response from the server in XMLHttpRequest? – Riya Singh Nov 12 '22 at 10:28

score 3 · Answer 2 · answered May 10 '12 at 23:58

3

Change the post_max_size directive in the ini file

answered May 10 '12 at 23:58

user1388342

31
3

score 1 · Answer 3 · answered May 07 '12 at 00:12

1

The Ajax call will not limit the size. It is probably the max file size in the php ini file.

answered May 07 '12 at 00:12

epascarello

204,599
20
195
236

AJAX File Upload with XMLHttpRequest

3 Answers3

On the client side

On the server side

Linked

Related