上传图像并从php获取响应，然后重新加载相同的图像.AJAX上传

我有一个配置文件页面，默认图像为（no-image.jpg）。下面有一个选项，用户可以上传他的图像。一旦用户选择了图像并在对话框中单击"打开"，图像应该上传到服务器，响应应该用他的新图像替换（no-image.php）。我试着在谷歌上搜索并堆叠我需要的确切输出。但我找不到。

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

如有帮助，不胜感激。提前感谢！！。。。