Upload image post method via jquery

Question

I want to upload an image on click of a button using jquery.

Here is my html..

<input id="imgphno" type="text" maxlength="10" name="imgphno" /><br/><br/>
<input id="file" type="file" name="file" />
<br/><br/>
<input type="submit" name="submit" value="Send" id="sndimg"/>

and the related jquery..

$(document).ready(function(){
 $("#sndimg").click(function() {
  imgphno = $("#imgphno").val();
  myimage = $("#file");//what should go here so that post will have image data from input=file
  $.post("sendmsg.php", {imgphno: imgphno, imageData: myimage},
  function(data) {
   alert(data);
  });
 }
}

Thanks In Advance!!

You may find your answer here http://stackoverflow.com/questions/21164365/how-to-send-image-to-php-file-using-ajax or http://stackoverflow.com/questions/19447435/ajax-upload-image and alot of different ones [here](https://www.google.ch/search?q=site%3Astackoverflow.com+posting+an+image+with+ajax&oq=site%3Astackoverflow.com+posting+an+image+with+ajax) — Spokey, Oct 06 '14 at 08:35
instead of using `$("#file")` , why don't you go for `$("#file").val()`. The former one will give you the `array of object` and the latter gives you the `path` with the `filename` . — Tushar Raj, Oct 06 '14 at 08:36

score 0 · Accepted Answer · answered Oct 06 '14 at 08:37

It is possible to upload files to a server using ajax, but be aware that it is not supported by all browser (mainly IE have some issues with this). The code beneath can be used to post an entire form to the server using ajax. This will allow for file uploads by the browsers supporting it.

    var formData = new FormData($('#ID_OF_YOUR_FORM')[0]);      
    $.ajax({  
        url: "/urltophpscript.php", 
        type: "POST",           
        data: formData,  
        processData: false,  
        contentType: false,         
        dataType: "json",
        success: function(data) { 
            if(data.success){
                // Do something
            }
            if(data.error){
                // DO something
            }
        },
        error: function() {
            // Do something
        }
    });

However, I would rather advice you to go with a solution that is supported by all browsers. This is done with hiding an iframe on the page which the form will be posted to:

<form action="#" method="post" enctype="multipart/form-data" id="Inet" class="form-horizontal" name="Inet" >
<iframe src="" id="ulframe" name="ulframe" style="display:none;"></iframe>

The above is the form and the iframe where to content will be posted to. The code beneath is used to send the data to the iframe, and then read the result echoed from the PHP script as json:

$('#Inet').attr('action', '/modules/module.intranett/ajax/intranett/createArticle.ajax.php');
$('#Inet').attr('target', 'ulframe');
$('#Inet').submit();

$('#ulframe').load(function(){
    var data = JSON.parse( $('#ulframe').contents().text() );
    if( data.success) {
        // Do Something 
    }
});
return false;

Upload image post method via jquery

1 Answers1