How can i upload image by ajax and php

Question

i have this cod that insert text to data base, but i need insert the images withe text into data base.

my code ajax like :-

function AddComment(){
     var text=$("#text").val();
     $.ajax({
           type:"post",
           url:"application/controllers/process.php",
           data:"text="+text+"&action=add",
           success:function(data){
                      showComment();              
                   }
     });
 }

my form :-

<form>
          <input id="inputUpProfile" name="inputUpProfile" class="inputUpProfile hidefile" type="file" onchange="readURL(this)"/>
          <img id="blah" src="#" width="100" height="100" style="display:none" />

          <textarea name="post" id="text" rows="3" cols="40" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

          <ol class="controls clearfix">
              <input type="button" id="sent" onclick="AddComment();" class="uibutton confirmb" value="Send"> 
</form>

http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery?rq=1 — Musa, Oct 03 '13 at 23:06

score 0 · Answer 1 · edited May 23 '17 at 10:32

To upload an image using Ajax, you need to use an iFrame, a flash plugin or something like that. With iFrame, the concept is that you have an iFrame (invisible) somewhere on your page with an ID. You point your form's target attribute at it, then in the result page in the iFrame you call a function in the parent window's javascript which triggers the result in your main window. It's fairly straight forward and doesn't require large plugins or much messing around with.

This is heavily documented on stack, so do some searching. https://stackoverflow.com/search?q=php+ajax+jquery+upload+image+with+iframe

How can i upload image by ajax and php

1 Answers1