Send image to server Ajax

Question

How can i send image from the client side to server?

i have a simple form like :

      <form>
  <input type="file" id="myfile" name="myfile" />
  <input type="button" value="Submit" onclick="SendImageToServer();" />
  <iframe id="uploadframe" name="uploadframe" src="upload.php" width="8" height="8" scrolling="no" frameborder="0"></iframe>
</form>

And in the method i am using is :

          function sendImage(){
      if (window.XMLHttpRequest)
                  {
                    xmlhttp=new XMLHttpRequest();

                  }

                 else
                  {
                   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                                //I want to get the response as simple <img scr="myimage"/>

             }

Can anyone help me how can i do this using Ajax-php.(NO JQUERY)?

Answer 1

Well, for one thing you cannot send files with AJAX. But if you are submitting to an iframe, then the form needs to have enctype="multipart/form-data" defined, otherwise it does not submit files.

Answer 2

You should not use AJAX term as you won't be creating one. To upload the file set an action and target on form and everything else should be automatic, that is, in-page.

<form action="upload.php" target="uploadframe" enctype="multipart/form-data">
... everything else here
<input type="submit" value="Go!"/>
</form>

Hope this helps...