javascript html 5 FileReader example for php input stream

html

<input name="upload_files" id="upload_files" multiple="multiple" type="file">

javascript

function upload(fileInputId, fileIndex)
        {
            // take the file from the input
            var file = document.getElementById(fileInputId).files[fileIndex];
            var reader = new FileReader();
            reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
            reader.onloadend  = function(evt)
            {
                    // create XHR instance
                    xhr = new XMLHttpRequest();
                    
                    // send the file through POST
                    xhr.open("POST", 'upload.php', true);

                    // make sure we have the sendAsBinary method on all browsers
                    XMLHttpRequest.prototype.mySendAsBinary = function(text){
                        var data = new ArrayBuffer(text.length);
                        var ui8a = new Uint8Array(data, 0);
                        for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
            
                        if(typeof window.Blob == "function")
                        {
                             var blob = new Blob([data]);
                        }else{
                             var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)();
                             bb.append(data);
                             var blob = bb.getBlob();
                        }

                        this.send(blob);
                    }
                    
                    // let's track upload progress
                    var eventSource = xhr.upload || xhr;
                    eventSource.addEventListener("progress", function(e) {
                        // get percentage of how much of the current file has been sent
                        var position = e.position || e.loaded;
                        var total = e.totalSize || e.total;
                        var percentage = Math.round((position/total)*100);
                        
                        // here you should write your own code how you wish to proces this
                    });
                    
                    // state change observer - we need to know when and if the file was successfully uploaded
                    xhr.onreadystatechange = function()
                    {
                        if(xhr.readyState == 4)
                        {
                            if(xhr.status == 200)
                            {
                                // process success
                            }else{
                                // process error
                            }
                        }
                    };
                    
                    // start sending
                    xhr.mySendAsBinary(evt.target.result);
            };
        }

server side(php)


// read contents from the input stream
$inputHandler = fopen('php://input', "r");
// create a temp file where to save data from the input stream
$fileHandler = fopen('/tmp/myfile.tmp', "w+");

// save data from the input stream
while(true) {
    $buffer = fgets($inputHandler, 4096);
    if (strlen($buffer) == 0) {
        fclose($inputHandler);
        fclose($fileHandler);
        return true;
    }

    fwrite($fileHandler, $buffer);
}

// read contents from the input stream

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

// create a temp file where to save data from the input stream

$fileHandler = fopen('/tmp/myfile.tmp', "w+");

 

// save data from the input stream

while(true) {

    $buffer = fgets($inputHandler, 4096);

    if (strlen($buffer) == 0) {

        fclose($inputHandler);

        fclose($fileHandler);

        return true;

    }

 

    fwrite($fileHandler, $buffer);

}

- See more at: http://www.webiny.com/blog/2012/05/07/webiny-file-upload-with-html5-and-ajax-using-php-streams/#sthash.aIgHd8zw.dpuf

// read contents from the input stream

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

// create a temp file where to save data from the input stream

$fileHandler = fopen('/tmp/myfile.tmp', "w+");

 

// save data from the input stream

while(true) {

    $buffer = fgets($inputHandler, 4096);

    if (strlen($buffer) == 0) {

        fclose($inputHandler);

        fclose($fileHandler);

        return true;

    }

 

    fwrite($fileHandler, $buffer);

}

- See more at: http://www.webiny.com/blog/2012/05/07/webiny-file-upload-with-html5-and-ajax-using-php-streams/#sthash.aIgHd8zw.dpuf

- See more at: http://www.webiny.com/blog/2012/05/07/webiny-file-upload-with-html5-and-ajax-using-php-streams/#sthash.aIgHd8zw.dpuf