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

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

i having 1 profile page default image (no_image.jpg). below there alternative user can upload image. 1 time user selected image , click open in dialog box, image should upload server , response should replace (no_image.php) new image. tried googling , stacking exact output need. 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 info = 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'); = 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."' 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 appreciated. in advance !!...

well far know (may knowledge outdated) can not send image via ajax.

change 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 utilize code submit form.

now info uploaded normal form, hidden iframe not cause redirect etc.

in 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."' 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 together javascript } if(!empty($_post['ajax'])){ die(json_encode($uploaded)); exit(); }

now when php image phone call js function, js in hidden iframe want phone call function on parent file.

in html file, create new js function updateimage

function updateimage(imgpath){ $('#userimage").attr('src': imgpath); }

this js update image path newly uploaded image path. may have prepare variables , image paths create work. wrote them quickly

php jquery ajax file-upload