How to upload image file with ajax?

Question

problem when upload image MVC with ajax, i have controls_class.php content function upload_img_admin in class settings calling from page c_ajax_img.php

page c_ajax_img.php

include_once('controls_class.php');
$ajax_up_img = new settings;
$ajax_up_img->upload_img_admin(@$_FILES['file_upload']);

function upload_img_admin in class settings

function upload_img_admin()
{
        $dir_name=dirname(__FILE__)."/upload/";
        $path=@$_FILES['file_upload']['tmp_name'];
        $name=@$_FILES['file_upload']['name'];
        $size=@$_FILES['file_upload']['size'];
        $type=@$_FILES['file_upload']['type'];
        $error=@$_FILES['file_upload']['error'];  
                   ...
                   ...

if( isset($_FILES['file_upload']) )
    {
        move_uploaded_file($path,$dir_name.$name);
                      ...
                      ...
        echo "ok";

     }
     else
     {
         echo "File not found";
      }

 }

function ajax get data form and send to function previous for upload image

$(document).ready(function() {
$(".btn_upload_avatar").click(function(e) {
$('.msgerror').hide().fadeIn(1000).html(  '<div class="loading"></div>');
e.preventDefault();
$.ajax({
type:"POST",
url: "../controls/c_ajax_img.php",
cache: false,  
processData:false, 
contentType: false,
data:$("#form_up_img").serialize(),
success: function (data)
{
    if(data == 0){                  
     $('.msgerror').addClass('msgerror_in2').html(data);    
 }else{ 
    $('.msgerror').addClass('msgerror_in2').html(data); 
}
}   
});
});
});

http://stackoverflow.com/questions/25855758/showing-uploaded-image-after-successful-upload/26038832#26038832 you will get the answer from here — , Jan 21 '15 at 05:57
in function upload_img_admin this ligne isset($_FILES['file_upload']) sending error i think the function don't know if isset submit or no — Maximus, Jan 21 '15 at 06:10
you need to append the file first before sending to php while you are using the ajax var formdata = new FormData(); formdata.append("file", file.files[0]); like this — , Jan 21 '15 at 06:17
i don't know exactly this error but when click submit the data not send and show message error "File not found" although the code ajax correctly — Maximus, Jan 21 '15 at 06:19
I thing the file you are trying to send,that file might not received by php. that is why it shows the error.First check whether the file is received or not using print_r($_FILES). — , Jan 21 '15 at 06:29
http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery check out this one. — , Jan 21 '15 at 06:37
i solve the problem that error in function jquery click class `$(".btn_upload_avatar").click(function(e) ...` must use an submit in form for sending file also php recieved this file correctly like as `$("#form_up_img").on('submit',(function(e) ....` — Maximus, Jan 21 '15 at 15:39

score 1 · Answer 1 · answered Jan 21 '15 at 06:13

Something like this might help you mate.. :)

$(document).ready(function () {
      $('#UploadForm').on('submit',(function(e) {
          $('.msgerror').hide().fadeIn(1000).html('<div class="loading"></div>');
          e.preventDefault();
          var formData = new FormData(this);
          formData.append('file', input.files[0]);

          $.ajax({
              url: '../controls/c_ajax_img.php',
              data: formData,
              contentType: false,
              type: 'POST',
              processData: false,
              success: function (data) {
                  console.log("success");
                  console.log(data);
              },
              error: function (data) {
                  console.log("error");
                  console.log(data);
              }
          });
      });
  });

FYI

FormData

ProcessData is set to false so that it prevents jQuery from automatically transforming the data into a query string

i solve the problem that error in function jquery click class `$(".btn_upload_avatar").click(function(e) ...` must use an submit in form for sending file also php recieved this file correctly like as `$("#form_up_img").on('submit',(function(e) ....` thanks — Maximus, Jan 21 '15 at 15:40

How to upload image file with ajax?

1 Answers1