Uploading Image and getting response from php and reloading the same image. AJAX Upload

Question

I am having one profile page where default image will be (no_image.jpg). Below that there is a option where user can upload his image. Once the user selected the image and click open in the dialog box, the image should upload to server and the response should replace the (no_image.php) with his new image. I tried googling and stacking for the exact output i need. But i cannot find that.

style

#upload_progress {display:none;}

HTML

 <div id="upload_progress">
    </div>
<form enctype="multipart/form-data" method="post" action="">
        <input type="file" name="file" id="file" onchange="uploadFile()"/>
        <input type="submit" name="submit" />
    <form>

js

var handleUpload = function(event){
    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('file');

    var data = new FormData();

    data.append('ajax', true)
        data.append('file', fileInput.files);


    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(event){
        if(event.lengthComputable){
            var percent = event.loaded  /event.total;
            var progress = document.getElementById('upload_progress');

            while(progress.hasChildNodes()){
                progress.removeChild(progress.firstChild);
            }
            progress.appendChild(document.createTextNode(Math.round(percent*100) + '%'))
        }
    });

    request.upload.addEventListener('load', function(event){
        document.getElementById('upload_progress').style.display = 'none';
    });

    request.upload.addEventListener('error', function(event){
        alert('upload failed');
    });

    request.addEventListener('readystatechagne', function(event){
        if(this.readyState == 4){
            if(this.status == 200){
                var links = document.getElementById('uploaded');

                console.log(this.response);
                var uploaded = eval(this.response);

                var div, a;

                div = document.createElement('div');
                a = document.createelement(a);

                a.setAttribute('href', 'files/'+uploaded);
                a.appendChild(document.createTextNode(uploaded[i]));

                div.appendChild(a);
                links.appendChild(div);

            }else{

            }
        }
    });

    request.open('POST', '/profile');
    request.setRequestHeader('Cache-Control', 'no-cache');

    document.getElementById('upload_progress').style.display = 'block';
    request.send(data);
}

window.addEventListener('load', function(event){
    var submit = document.getElementById('submit');
    submit.addEventListener('click', handleUpload);
});

PHP

if($_FILES['file'] != '')
{
    //print_r($_FILES);

        $filename = basename($_FILES['file']['name']);

        $sqlUpdate  =   mysql_query("UPDATE tableA SET user_img = '".$filename."' WHERE email = '".$userEmail."'");
        $newname = '\images\profile/'.$filename;

        if($_FILES['file']['error'] == 0 && move_uploaded_file($_FILES['file']['tmp_name'], $newname));
        $Uploaded = $filename;
}

if(!empty($_POST['ajax'])){
    die(json_encode($Uploaded));
    exit();
}

Helpers would be appreciated. Thanks in Advance !!...

Aamir Mahmood · Accepted Answer · 2013-02-19 12:16:47Z

2

Well as far as I know (may be my knowledge is outdated) You can not send image via AJAX.

Change your form to

<iframe id="hiddenIframe"></ifram>
<form enctype="multipart/form-data" method="post" action="pageGettingData.php" target="hiddenIframe">
    <input type="file" name="file" id="file" onchange="uploadFile()"/>
    <input type="submit" name="submit" />
<form>

and in uploadFile() function use the code which will submit the form.

Now data will be uploaded as a normal form, but to a hidden iframe which will not cause any redirect etc.

in your PHP code

if($_FILES['file'] != '')
{
    //print_r($_FILES);

        $filename = basename($_FILES['file']['name']);

        $sqlUpdate  =   mysql_query("UPDATE mp_project_buyer_query SET user_img = '".$filename."' WHERE email = '".$userEmail."'");
        $newname = '\images\profile/'.$filename;

        if($_FILES['file']['error'] == 0 && move_uploaded_file($_FILES['file']['tmp_name'], $newname));
        $Uploaded = $filename;

        echo '<script>parent.updateImage("' . $Uploaded . '");'; // add a javascript
}

if(!empty($_POST['ajax'])){
    die(json_encode($Uploaded));
    exit();
}

Now when php will get an image it will call a JS function, as that JS is in the hidden Iframe we want to call the function on the parent file.

in your HTML file, create a new JS function updateImage

function updateImage(imgPath){
    $('#userImage").attr('src': imgPath);
}

this JS will update the image path with the newly uploaded image path. You may have to fix the variables and the image paths to make it work. I just wrote them quickly

answered Feb 19, 2013 at 12:16

Aamir Mahmood

2,7243 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wildhaber Over a year ago

With XHR2 you can process files by Ajax. So there is no need anymore for this iframe-solution ;-) html5rocks.com/en/tutorials/file/xhr2

Vignesh Gopalakrishnan Over a year ago

I did a small mistake in my file. so i was fighting with it from morning and atlast i came to stack. Now i found out and its going via ajax. Your answer will work very well. Thanks for your effort.!!!

Collectives™ on Stack Overflow

Uploading Image and getting response from php and reloading the same image. AJAX Upload

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related