MiX1.TK
Site menu
Login form
Section categories
Web Development [20]
Learn about PHP & Web Development
Education [4]
Learn for Free
Knowledge & Tricks [0]
General Knowledge,computer Knowledge & tricks
Writing World [2]
A MiX World of SmS on Various Topics
Search
Main » 2012 » November » 6 » Ajax File Upload without Post Using HTML5
10:11 PM
Ajax File Upload without Post Using HTML5
Today We will learn about that how can we upload file using Javascript without Submiting the Form 

 

 
first create a file Element in your Html form having the form type multipart-formdata

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

 
After that call following function of javascript for uploading the file 

 

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

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

            };

        }

 

 

 

 
After that make a Php file named upload.php having following code

 

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

 
// done
?>  
Category: Web Development | Views: 135 | Added by: admin-priyank | Rating: 5.0/1
Total comments: 0
Name *:
Email *:
Code *:
Calendar
«  November 2012  »
SuMoTuWeThFrSa
    123
45678910
11121314151617
18192021222324
252627282930
Entries archive
Our poll
Rate my site
Total of answers: 4
Site friends
  • Create a free website
  • Online Desktop
  • Free Online Games
  • Video Tutorials
  • All HTML Tags
  • Browser Kits
  • Statistics

    Total online: 1
    Guests: 1
    Users: 0
    Creative Commons License
    Free Downloads and Services by MiX1 is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
    Copyright MyCorp © 2018