CODEWITHSUNDEEP
javascriptphpajax
user3590694
user3590694

Reputation: 5

Possible to send an image file to PHP with AJAX?

I'm trying to send an image file along with other text information using AJAX, however I can't get the file part to work, as I don't quite understand how to do it.

Here is the Javascript:

  //The user selects a file using an input element with the ID "picInput"

  var picInput = document.getElementById("picInput");
  picValue = picInput.files[0];

  //"postString" is the string with all the other text information that is being sent
  //All the other info in it is received fine, it is just the picture having problems

  postString += "pic=" + picValue;

  var xmlhttp = new XMLHttpRequest;
  xmlhttp.open("POST","handler.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send(postString);

And here is the PHP:

$pic = $_FILES['pic'];
ftp_put($ftpCon,"pics/".$name,$pic,FTP_BINARY) or die(mysqli_error($con));

With this code, I get 'undefined index' for the "$pic = $_FILES['pic'];" line.

If I change $_FILES to $_POST I get "ftp_put([object File]): failed to open stream: No such file or directory"

Upvotes: 0

Views: 82

Answers (1)

Mehrdad Hedayati
Mehrdad Hedayati

Reputation: 1454

Are you trying to ajax a form content? If yes you could try AJAX form Plugin

$("body").on('submit','form#someForm', function(e){
    e.preventDefault();
    $(this).ajaxSubmit({
        target: '#output',
        success: afterSuccess
    });
});

Then you'll have to put the file and the rest of your contents in 

<form id="someForm" method="post" action="handler.php"></form>

and name your file input like

<input type="file" name="pic" />

the afterSuccess function will be called after everything is done

the #output can be used to show progress or things like that

Upvotes: 0

Related Questions