javascript - Ajax upload Image -


i'm trying upload image using ajax on file image name changing can't $_files["inputuploadfileimage"]["tmp_name"]; on server side code.

jquery code

  $('#inputuploadfileimage').change(function() {         var filepath = $('#inputuploadfileimage').val();         var filesize = this.files[0].size;          $.ajax({             type: "post",             async: true,             datatype: "json",             url: ajaxurl,              data: ({                 type: "post",                 action: 'ajax_changingprofileimage',                 filepath: filepath,                 filesize: filesize             }),             success: function (response) {                 if (response.message === 'imagesuccessfullyuploaded') {                     alert('image uploaded.');                     $('#imguserimage').image_src = filepath;                     console.log(response.filepath);                 } else {                     alert('image not uploaded successfully.');                     $('#imguserimage').image_src = filepath;                     console.log(response.filepath);                 }             },             error: function (jqxhr, textstatus, errorthrown) {                 console.log(jqxhr);                 console.log(textstatus);                 console.log(errorthrown);             }         });     }); 

php code

function ajax_changingprofileimage() {      $filetmppath = $_files["inputuploadfileimage"]["tmp_name"];     $filesize = $_post['filesize'];     $filepath = $_server['document_root'] . "restronaut/wp-content/uploads/usersimages/1.jpg";     $isuploaded = move_uploaded_file($filetmppath ,$filepath);      if ($isuploaded) {         $response['message'] = 'imagesuccessfullyuploaded';         $response['filepath'] = $filepath;      } else {         $response['message'] = 'imagenotsuccessfullyuploaded';         $response['filepath'] = $filepath;     }      header('content-type: application/json');     echo json_encode($response);     die(); } 

please , many in advance..

you need use new formdata() send image using ajax call. equal setting enctype in regular form (without ajax)

for more info on formdata object here's mdn link you.

jquery code

$('#inputuploadfileimage').change(function() {     /*var filepath = this.files[0];     var filesize = this.files[0].size;      var file = this.files[0];     var name = filepath.name;     var type = filepath.type;*/     var formdata = new formdata($('*formid*')[0]);     $.ajax({         type: "post",         async: true,         datatype: "json",         url: ajaxurl,          data: ({             type: "post",             action: 'ajax_changingprofileimage',             formdata : formdata          }),         success: function (response) {             if (response.message === 'imagesuccessfullyuploaded') {                 alert('image uploaded.');                 $('#imguserimage').image_src = filepath;                 console.log(response.filepath);             } else {                 alert('image not uploaded successfully.');                 $('#imguserimage').image_src = filepath;                 console.log(response.filepath);             }         },         error: function (jqxhr, textstatus, errorthrown) {             console.log(jqxhr);             console.log(textstatus);             console.log(errorthrown);         }     }); }); 

php code

print_r($_files); 

Comments