how to upload an image using ajax

Question

I want to upload an image without refreshing the page,But my page still refresh when i hit submit button to upload image. what is wrong with my ajax code. This works when am submitting form with plain text but not with image file.

test.php

<div class="preview_d_p" id="preview_d_p">
<div class="preview">
    <div class="p_preview">
       <div id="p_p_image"><div id="myimage"></div></div>
    </div>
    <div id="lab"> <label for="photo_upload">upload</label></div>
      <form enctype="multipart/form-data">
      <input type="file" id="photo_upload" name="image_upload">
    <input type="submit" value="save" id="insert_img" onclick="return loadimage()">
    </form>
</div></div>


<script>
function loadimage(){
       var image = documentElement('photo_upload').value;



     $.ajax({
         type:'post',
         url:'profile.php',
         data:{
            image:image

         },
         cache:false,
          success: function(html){

          }

     });

       return false;
    }
</script>

`if(institute != "")` where is `institute` first defined? You probably meant `image`. Edit: This comment as per the original post https://stackoverflow.com/revisions/44571570/1 — Funk Forty Niner, Jun 15 '17 at 15:35
I think you are trying to send `image` instead of `institute`. — Adharsh M, Jun 15 '17 at 15:37
@Fred-ii- beat me to it! also if you console.log in success callback does it appear in the console? — treyBake, Jun 15 '17 at 15:37
@ThisGuyHasTwoThumbs gotta love [*"not my real code, so I'll just edit that, without marking it as a mistake..."*](https://stackoverflow.com/revisions/44571570/2) — Funk Forty Niner, Jun 15 '17 at 15:39
yea is mistake while trying to post the question but what i have is image but still having the same problem — C Francis, Jun 15 '17 at 15:39
You need to use `formData` to upload Files. See [This answer](https://stackoverflow.com/questions/19447435/ajax-upload-image) — RiggsFolly, Jun 15 '17 at 15:51

score 2 · Answer 1 · answered Jun 15 '17 at 15:44

2

my advice is changing the input to a button (type="button") - I prefer buttons to inputs as they're more easily stylable.

But you can do something like this to govern submitting data without page refresh:

HTML EXAMPLE (NOT A COPY OF YOUR HTML):

<div id="container">
    <form action="" method="post" id="myForm">
        <input type="text" value="hello world!" />
    </form>

    <!-- what's great about buttons, is that you don't have to place inside the form tags -->
    <button type="button" id="submitBtn">

JS To match

$(document).ready(function()
{
    $('#submitBtn').on('click', function()
    {
        //ajaxy stuff
        //will show the success callback function though:
        success: function(res)
                 {
                     $('#container').html(res);   
                 }
    })
});

if your post script returns html then this should work. Let me know if otherwise :)

answered Jun 15 '17 at 15:44

treyBake

6,440
6
26
57

2

Now "this" I like. – Funk Forty Niner Jun 15 '17 at 15:46
1

@Fred-ii- Except it does not cover How to upload an image with Javascript/AJAX which is what the question is actually about – RiggsFolly Jun 15 '17 at 15:47
Where's the closing "" ;) - jokes – Tez Wingfield Jun 15 '17 at 15:47
@RiggsFolly the question description or title doesn't mention an image - only the code. I'm answering the question at hand rather than a full solution, SO should be used as a guide rather than an absolute – treyBake Jun 15 '17 at 15:49

score 0 · Accepted Answer · answered Jun 04 '19 at 09:59

I solved this problem using formdata to send my image file to server

$(document).on("submit","form",function(e){
    e.preventDefault();

    var file = $("#product-file-i").val();
    var p = $("#product-upload-f").children("input[name=name]").val();

 $.ajax({
             type:"post",
             url:"profile.php",
             data:new FormData(this),
             contentType:false,
             processData:false,
             cache:false,
             success: function(feedback){
              alert(feedback);

             },
             error: function(){

             }

          });


});

how to upload an image using ajax

2 Answers2